javascript - 检查 window.pageYoffset 是否 >= 设置值？

Question

当页面滚动超过一定距离时，我正在尝试使用 pageyoffset 更改一些 css 样式。我是 javascript 的新手，所以不知道如何正确编写它。

如有任何帮助，我们将不胜感激。

if ((window.pageYOffset) >= 240) {
    var hero = document.getElementById('hero')
    hero.style.position = "fixed"
    hero.style.top = "-140px"
}

Answer 1

您的逻辑完全正确，您只需将条件包装在
window.onscroll = function() { } 中。

请注意，在下面的示例中，我已将您的两个样式更改替换为一个仅添加背景的样式更改，以展示这种效果。

window.onscroll = function() {
  if ((window.pageYOffset) >= 240) {
    var hero = document.getElementById('hero')
    //hero.style.position = "fixed";
    //hero.style.top = "-140px";
    hero.style.background = "green";
  };
}

#one {
  height: 500px;
}

<div id="one"></div>
<div id="hero">Hi</div>

请注意，一旦完成所需的行为，您还应该解除绑定(bind) 滚动功能，这可以使用 jQuery 的 .unbind() 来完成。方法:

$(window).unbind('scroll');

如果您想坚持使用原生 JavaScript，您可以选择使用 addEventListener() 和 removeEventListener()。

希望对您有所帮助! :)