javascript - 如何根据页面是否滚动到顶部来修改类？

Question

我想在用户滚动离开页面顶部时向 HTML 元素添加一个类，然后在用户返回页面顶部时删除该类。我认为 JavaScript 是实现此目标的最佳方式，但不知道如何实现。

例如，在演示中，文本类在滚动到顶部时为“红色”，而在其他任何地方都为“蓝色”。

DEMO

CSS

.red {
  color:red;
}
.blue {
  color:blue;
}

HTML

<br>
<br>
<br>
<br>
<br>
<p  id="changeme" class="red">Text</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

Answer 1

可以通过window.scrollY获取页面当前的滚动位置

对于 window.scrollY === 0 和 window.scrollY > 0 的情况，您需要使用一些逻辑为滚动事件添加事件监听器。 p>

于是添加事件监听器，并绑定(bind)添加或删除类的函数。

window.addEventListener("scroll", runOnScroll);

function runOnScroll() {
    if (window.scrollY === 0) {
        //do stuff for being at the top of the page
    } else if (window.scrollY > 0) {
        //do stuff for not being at the top of the page
    }
}

如果您正在为如何填写上面代码示例的注释部分而苦恼，请提出另一个关于如何使用 javascript 操作 HTML 元素的问题。