javascript - 对于消失的导航栏，我的 javascript 中缺少什么？

Question

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

我搜索了 youtube、google 等，但似乎每个人都在使用 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 = "";
  }
}

消失的导航栏。

Answer 1

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

以下是更新后的 JavaScript 代码，第一个问题是您将事件监听器附加到 window，而不是要滚动的元素，第二个错误是 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);