将导航位置设置为滚动顶部答案

【问题标题】：Set nav position to top on scroll将导航位置设置为滚动顶部
【发布时间】：2020-08-15 17:40:37
【问题描述】：

我正在研究一些 CSS 来将我的导航设置为滚动的顶部。我的导航标记是：

<nav class="flex-nav" id="nav">
      <ul>
        <li><a href="#">Item 01</a></li>...

我的导航当前位置是：

.flex-nav ul{
 position: fixed;
 top: 6em;
 width: 100%;
 }

我希望在我向下滚动时将其设置为顶部，并在我再次滚动到页面顶部并将其设置回顶部时取消粘贴：6em。

我是否需要 JavaScript 来处理这个问题，并在导航上设置一个 id 以在 JavaScript 中使用它？

【问题讨论】：

标签： javascript html css

【解决方案1】：

这是用纯 Javascript 编写的工作 sn-p：

var body = document.getElementsByTagName('body')[0],
    nav = document.getElementById('nav');

window.addEventListener('scroll', function() { 
  if (body.scrollTop > 0) {
    nav.className += " no-indent"
  } else {
    nav.classList.remove("no-indent");
  }
}, true)

.flex-nav {
  position: fixed;
  top: 6em;
  width: 100%;
  height: 50px;
  background-color: green;
  transition: all .5s ease-in-out;
}

#content {
  width: 100%;
  height: 1000px;
  background-color: gray;
}

.no-indent {
  top: 0 !important;
}

<nav class="flex-nav" id="nav">
</nav>
<div id="content">
</div>

【讨论】：

谢谢 :) 我猜 .no-ident 在滚动大于 0 时将位置设置为 top:0，否则不使用它。但我没有在标记中看到 .no-ident ？那么，那没必要了？
@user2371684，是的，你是对的。此类不在 HTML 代码中，因为它通过 Javascript 在此行中应用：document.getElementById('nav').className += " no-indent"。它基于顶部的滚动像素应用和删除：“如果 scrollTop > 0” - 添加类，“如果 scrollTop === 0” - 删除类
MDN 说“由于滚动事件可以高速触发，因此事件处理程序不应执行计算成本高昂的操作，例如 DOM 修改。”您至少应该将元素保存在变量中。

【解决方案2】：

onload = _ => {
    let nav = document.getElementById("nav");
    let basePos = nav.offsetTop;
    setInterval(_ => {
        nav.style.top = Math.max(0, basePos - scrollY) + "px";
    }, 20);
};

每 20 毫秒（大约）运行一次并更新元素位置。

【讨论】：