javascript - 使用 Vanilla Javascript 检测滚动以帮助更改导航 CSS

Question

这个问题已经有答案了:

Detect if user is scrolling (6 个回答)

已关闭 4 年前。

我正在尝试检测页面上的滚动是否超过高度为 80 像素的固定顶部导航的 100 像素。

计划是，一旦用户的滚动超过上述 100 像素，导航栏将更改背景颜色。

我看过很多关于这个主题的教程，但我所看到的都是使用 Jquery 的。我希望使用 Vanilla Javascript 来实现。

Answer 1

您可以使用window.onscroll来检测滚动，并使用window.pageYOffset或document.documentElement.scrollTop属性来获取滚动位置 window 。以下是您所描述的场景的代码片段:

window.onscroll = function(){
var top =	 window.pageYOffset || document.documentElement.scrollTop;
if (top > 100) {
	document.getElementById('nav').style.background = "blue";
} else {
	document.getElementById('nav').style.background = "yellow";
}
};

nav {
  position:fixed;
  height:100px;
  width:100%;
  top:0;
  background:yellow;
  display:block;
}

<nav id="nav">
  Hello
</nav>
<div style="height:700px;">
  
</div>