Javascript 的粘性导航

Sticky navigation with Javascript

我正在做一个粘性导航,但是当我快速滚动时它不起作用..只有当我缓慢滚动时才会起作用但并不总是..

这是CSS:

div.sticky {
    position: fixed;
}

和 Javascript:

     window.addEventListener("scroll", function() {
        var nav = document.getElementsByClassName("nav_lista")[0];
        if(window.scrollY > 200) {
            nav.className += " " + "sticky";
            nav.style.top = 0;
        } else if (window.scrollY < 200) {
            nav.classList.remove("sticky");
            nav.style.top = null;
        }
     });

知道错误在哪里吗?

谢谢!

我没有看到你的问题...

这是一个 fiddle 我认为代表你的问题:https://jsfiddle.net/5gua3nto/2/ 此处相同的代码段:

window.addEventListener("scroll", function() {
 var nav = document.getElementById("menu");
 if(window.scrollY > 500) {
  nav.className += " " + "sticky";
  nav.style.top = 0;
 } else if (window.scrollY < 500) {
  nav.classList.remove("sticky");
  nav.style.top = null;
 }
});
    div.sticky {
    position: fixed;
}

#wrap{
  height: 8000px;
  background-color: black;
}

#menu
{
  background-color: red;
  height: 50px;
  width: 100%;
  z-index: 100;
}

body, html
{
  margin: 0;
  padding: 0;
}

  
<div id="wrap">
<div id="menu">

</div>
</div>

这个没有错误,至少在我的浏览器中没有。

我发现您的代码存在以下问题:

  1. 你没有处理window.scrollY完全相等的情况 到 200。
  2. 您在 js 中设置 style.top,而您可以在 css。
  3. 您正在使用 className += 而不是 classList.add()

我解决了以上所有问题,并且有效,如下所示:

window.addEventListener("scroll", function() {
  var nav = document.getElementsByTagName("nav")[0];
  nav.classList.toggle("sticky", window.scrollY > 200);
});
body {
  margin: 0;
}
nav {
  width: 100%;
  height: 200px;
  background-color: #99FFFF;
}
nav.sticky {
  position: fixed;
  top: 0;
}
main {
  background-color: #FF99FF;
  height: 200vh;
}
<nav>This is the nav</nav>
<main>This is the content</main>