使用基础实现粘性导航栏

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