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

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

例如，在演示中，文本类在滚动到顶部时显示为“红色”，而在任何位置时显示为“蓝色”

CSS

HTML

文本

您可以通过

窗口获取页面的当前滚动位置。滚动

对于
window.scrollY==0
和
window.scrollY>0

因此，添加事件侦听器并绑定添加或删除类的函数

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元素的问题。
下面是一个使用
document.documentElement.scrollTop
获取文档滚动位置的实现

(()=>{
let toAttach = document.querySelector('.toAttach')

  window.addEventListener('scroll', function(){
    let scrollPos = document.documentElement.scrollTop;

    if(scrollPos < 1){
      toAttach.classList.add('attached')
    } else {
      toAttach.classList.remove('attached')
    }
  })  
})()

（（）=>{
让toAttach=document.querySelector（'.toAttach'）
addEventListener（'scroll'，function（）{
让scrollPos=document.documentElement.scrollTop；
如果（滚动位置<1）{
toAttach.classList.add（'attached'）
}否则{
toAttach.classList.remove（'attached'）
}
})  
})()

注意：初始状态没有类，但下次滚动到顶部时，将触发类
我将在此处为您提供完整答案。。。。将您的需求与@Our_benders答案结合起来。您可以查看完整的代码段：

解决的问题是

在<代码>滚动

事件期间对区域的检测

通过

id

获取

元素

，并将其存储在

变量中

从所述变量中移除a

class

向所述

变量添加类

window.addEventListener（“滚动”，runnscroll）；
函数runnscroll（）{
如果（window.scrollY==0）{
//警报（“顶部”）；
var元素=document.getElementById（“changeme”）；
元素.classList.remove（“蓝色”）；
元素。类列表。添加（“红色”）；
}如果（window.scrollY>0）{
//警报（“非顶部”）；
var元素=document.getElementById（“changeme”）；
元素.classList.remove（“红色”）；
元素。类列表。添加（“蓝色”）；
}
}

.red{
颜色：红色；
}
蓝先生{
颜色：蓝色；
}

改变我

不完全相同的可能重复项。我已经澄清了我的问题。我仍然坚持我的反对票，因为这个问题没有包含一个最小的、完整的、可验证的例子-->这似乎有点苛刻，它仍然是一个明确的、可回答的问题，没有？@Sam--它是可回答的，并且已经得到了回答。--如果OP使用了一些研究——查看@Jonathan Brizio在我提供的dupe链接上的回答。。一个简单的

else

语句就能得到OP想要的答案。嘿，谢谢你的回答。我在这里试过了，但我做错了什么。不过，第6行少了一个“（”。谢谢你：D

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
    }
}

(()=>{
let toAttach = document.querySelector('.toAttach')

  window.addEventListener('scroll', function(){
    let scrollPos = document.documentElement.scrollTop;

    if(scrollPos < 1){
      toAttach.classList.add('attached')
    } else {
      toAttach.classList.remove('attached')
    }
  })  
})()