坚持导航，但不在顶部答案

【问题标题】：Stick nav, but not at top坚持导航，但不在顶部
【发布时间】：2016-12-01 19:30:25
【问题描述】：

如果我有这个代码：https://codepen.io/anon/pen/ObzgYo 我怎样才能使导航栏不粘在顶部，而是在顶部下方 20px 处？

我尝试过这样做：

.main-nav-scrolled {
  position: fixed;
  width: 100%;
  top: 20;  <== 
}

但由于某种原因，它会卡在底部

【问题讨论】：

top: 20; 意义不大，除非您添加测量声明。试试top: 20px;——如果没有声明，就无法知道浏览器将使用什么进行测量。它可能使用 20 英寸……或 ems……或厘米……使其移动到底部。
谢谢，这就是问题所在，为什么px 设置为0 时不需要它，而其他号码则需要它？
0 是 0.. .. 0 英寸与 0px 相同与 0cm 与 0mm 相同...所以仅使用 0 不是问题。但对于任何其他测量，您需要指定单位。

【解决方案1】：

您正在编辑的代码既适用于标题类，也适用于 main-nav-scrolled 类。仅向 main-nav-scrolled 类添加顶部值，它会按预期工作。

header,
.main-nav-scrolled {
  position: fixed;
  width: 100%;
  top: 0;
}
.main-nav-scrolled {
  top: 20px;
}

【讨论】：

【解决方案2】：

我发现 margin-x 或 padding-x 更可靠。

.main-nav-scrolled {
    margin-top: 20px; 
}

请注意，在您的示例中，边距将为您提供空白，而填充将扩展您的背景颜色。

【讨论】：