使用 Vanilla Javascript 检测滚动以帮助更改导航 CSS [重复]答案

【问题标题】：Using Vanilla Javascript to detect scroll to help make change to navigation CSS [duplicate]使用 Vanilla Javascript 检测滚动以帮助更改导航 CSS [重复]
【发布时间】：2018-09-21 07:02:51
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript dom

【解决方案1】：

您可以使用 window.onscroll 检测滚动和 window.pageYOffset 或 document.documentElement.scrollTop 属性来获取滚动位置窗户。以下是您描述的场景的代码 sn-p：

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>

【讨论】：

太棒了，这是完美的，我将更多地练习这个属性以适应它们以进行更多实现。谢谢你。
欢迎 carol 乐于助人。

【解决方案2】：

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

【讨论】：

谢谢大家，谢谢大家，我想通了

【解决方案3】：

将事件监听器绑定到窗口对象； 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

【讨论】：