Javascript 的粘性导航

Question

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

这是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;
        }
     });

知道错误在哪里吗？

谢谢！

Answer 1

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

这是一个 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>

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

Answer 2

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

你没有处理window.scrollY完全相等的情况到 200。
您在 js 中设置 style.top，而您可以在 css。
您正在使用 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>

Javascript 的粘性导航

Sticky navigation with Javascript

javascript

css

nav