堅持導航，但不在頂部

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; 
}