使用基础实现粘性导航栏

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

使用基础实现粘性导航栏

Implementing a sticky navbar using foundation

html

css

menu

sticky