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

Question

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

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

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

Answer 1

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

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>