Question

我尝试从高度为80px的固定顶部导航中检测到页面滚动是否超过100px。

计划是，一旦用户滚动超过所提到的100px，导航栏将更改背景颜色。

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

Answer 1

将事件侦听器绑定到窗口对象； window.addEventListener("scroll", callback)

然后在回调中可以使用这些属性/功能；

JS滚动： https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

JS高度： https://developer.mozilla.org/en-US/docs/Web/API/Screen/height

Answer 2

window.onscroll = function() {
    if (window.pageYOffset > 100) {
      // Do something
    }
};

Answer 3

您可以使用 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>

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

3 个答案: