坚持导航，但不在顶部

Question

如果我有这样的代码：https://codepen.io/anon/pen/ObzgYo我该如何做到这一点，所以导航栏不会粘在顶部，而是顶部下方20px？

我试着这样做：

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

，但是这使得它粘在底部出于某种原因

Answer 1

我发现保证金-x或填充-X更可靠。

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

只需要注意，在你的例子中，margin会为你提供空白，而padding会扩展你的背景颜色。

Answer 2

您正在编辑的代码是用于标题和主导航栏滚动的类。仅向主导航栏滚动的类添加顶级值，并且按预期工作。

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