使用 CSS 和 JS 修复滚动标题答案

【问题标题】：fixed header on scroll with CSS and JS使用 CSS 和 JS 修复滚动标题
【发布时间】：2020-05-24 16:53:37
【问题描述】：

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

<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

【问题讨论】：

标签： javascript html css header nav

【解决方案1】：

试试这个：

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

这告诉浏览器在项目从顶部达到 0 时保持粘性

【讨论】：

【解决方案2】：

您还可以为 nav 元素分配一个位置属性，并给它一个“固定”值。

.nav-secondry{
position: fixed;
}

【讨论】：

【解决方案3】：

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

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

【讨论】：

你为什么说“白色背景”？此外，您应该多解释一下您的答案。