Question

我需要帮助一些js将我的导航设置为滚动位置顶部。我的导航标记是：

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

导航的当前位置是：

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

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

我想我需要js来处理这个问题，并且还要在导航器上设置id以在js中使用它？

-Thanks

Answer 1

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

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

Answer 2

以下是用纯Javascript编写的工作代码段：

＆＃13;

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)

＆＃13;

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

＆＃13;

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

＆＃13;

滚动时将导航位置设置为顶部

2 个答案: