使用 CSS 和 JS 在滚动时修复 header

Question

当用户向下滚动页面时，如何使我的菜单保持固定在屏幕顶部？ 我有一个导航标签，其中包含.nav-secondary genesis-responsive-menu 的class 并且在该导航内有一个菜单项列表。所以现在如果有人向下滚动页面导航消失，我该如何修复我的 header？

<nav class="nav-secondary genesis-responsive-menu" aria-label="Secondary" id="genesis-nav-secondary">
 <div class="wrap">
  <ul id="menu-after-header-menu">
    <li id="menu-item-2571"></li>
    <li id="menu-item-2567"></li>
    <li id="menu-item-3644"></li>
  </ul>
 </div>
</nav>

这是它的链接以更好地理解代码： myksa.net

Answer 1

尝试这个：

.nav-secondary{
position:sticky;
top:0;
}

这告诉浏览器一旦从顶部击中 0 就保持该项目的粘性

Answer 2

您还可以将 position 属性分配给 nav 元素，并为其赋予“固定”值。

.nav-secondry{
position: fixed;
}

Answer 3

nav.secondary {
  position: sticky;
  top: 0;
}

还要确保为您的整个导航设置白色背景，您可以使用 z-index 将其设置为显示在所有其他元素之上。