使用基礎實現粘性導航欄

Question

我試圖利用粘性屬性來創建滾動時保持固定的菜單。我錯過了一個屬性？我已經正確配置和設置了基礎。

HTML：

<div class="fixed contain-to-grid"> 
    <nav class="top-bar" data-topbar=""> 
    <div class="top-bar-title"> 
    <strong>Title Here</strong> 
    </div> 
    <div class="top-bar-left"> 
     <ul class="dropdown menu" data-dropdown-menu> 
     <li class="menu-text"><a href="#">A</a></li> 
     <li class="menu-text"><a href="#">B</a></li> 
     <li class="menu-text"><a href="#">C</a></li> 
     <li class="menu-text"><a href="#">D</a></li> 
     </ul> 
    </div> 
    </nav> 
    </div> 

CSS：

.top-bar{ 
    height: 100px; 
    width: 100%; 
    color: white; 
    text-decoration: none; 
    font-size: 30px; 
    font-family: mainFont; 
} 

Answer 1

如果你想在菜單粘，不與滾動移動，然後使用固定的位置。

.top-bar-left{ 
    position: fixed; 
} 

Answer 2

只是在最後的例子添加position: fixed;作爲

.top-bar{ 
    height: 100px; 
    width: 100%; 
    color: white; 
    text-decoration: none; 
    font-size: 30px; 
    font-family: mainFont; 
    position: fixed; 
}