在我的JavaScript中，导航栏消失了什么？

安卓Dev20TX

我想避免使用jQuery，因此可以更好地理解Javascript。现在，我有一个Codepen设置，可以显示我的第一个项目的大部分内容。我知道代码可能马虎，我是一个初学者。我只是想让与我的导航栏一起使用的JS完全消失在onScroll上，然后从那里对其进行优化。谢谢！

我搜索过youtube，google，so，但每个人似乎都在使用jQuery。

https://codepen.io/dev20tx/pen/wbKyJq

CSS：

.nav {
border-bottom: 1px solid #EAEAEB;
text-align: right;
height: 70px;
line-height: 70px;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: white;
opacity: 0.8;
z-index: 2;
}

和Javascript：

window.onscroll = function() {navFunction()};

function navFunction() {
  if (document.body.scrollTop > 50 || 
    document.documentElement.scrollTop > 50) {
    document.queryselector(".nav").className = "test";
  } else {
    document.queryselector(".nav").className = "";
  }
}

导航栏消失。

什里达·沙玛（Shridhar Sharma）

我已经在https://codepen.io/anon/pen/rgOdXy更新了Codepen

以下是更新的JavaScript代码，第一个问题是您将事件监听器附加到window，而不是要滚动的元素，第二个错误是querySelectormethod的拼写错误

function navFunction(e) {
  if (e.target.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.querySelector(".nav").className = "nav test";
  } else {
    document.querySelector(".nav").className = "nav";
  }
}

document.querySelector(".container").addEventListener("scroll",navFunction);

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。