在我的javascript中，消失的导航栏缺少了什么？

我希望避免使用jQuery，以便更好地使用Javascript。现在，我已经设置了一个代码笔，它显示了我第一个项目的大部分内容。我知道代码可能很草率，我是个初学者。我只是想让JS在导航栏上完全消失，然后我会从那里优化它。谢谢

我搜索过youtube和谷歌，但似乎每个人都在使用jQuery

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 = "";
  }
}

---

消失的导航栏。

好吧，所以，没什么

首先，

queryselector

应该是

queryselector

（大写S）。还请注意，将

.nav

的

类名设置为
“test”
或
“
将从该元素中删除
“nav”
类

其次，应该确保在加载页面后附加onscroll事件

最后，您将onscroll事件附加到窗口，但实际上您希望将其附加到
.container
元素，因为您正在滚动的元素就是该元素

我并不是把整个解决方案都扔到你的腿上，因为你似乎想自己玩一玩。如果你想要一个更详细的答案，请不要犹豫。我已经在更新了代码笔

下面是更新后的JavaScript代码，第一个问题是您将事件侦听器附加到
窗口
，而不是要滚动的元素，第二个错误是
querySelector
方法的拼写错误

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);

我真不敢相信我没有把它资本化。谢谢，在你的答案和下面的答案之间，我意识到我的错误。