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

Question

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

例如在演示中，文本类为＆＃34; red＆＃34;滚动到顶部时，＆＃34;蓝色＆＃34;在任何地方，但。

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

的情况添加一些逻辑

所以添加事件监听器并绑定添加或删除类的函数。

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元素的问题。

Answer 2

以下是一个使用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')
    }
  })  
})()

注意：初始状态没有类，但下次滚动到顶部类会触发

Answer 3

我会在这里给你一个完整的答案....结合你的需求和@Our_Benefactors回答。您可以查看完整的代码段：

所解决的问题是

1. scroll事件
期间区域的检测
2. element id获取并将其存储在variable
中
3. 从所述变量中移除 class
4. 将类添加到variable
＆＃13;
＆＃13;
window.addEventListener("scroll", runOnScroll);

function runOnScroll() {
    if (window.scrollY === 0) {
        //alert('top');
        var element = document.getElementById("changeme");
    		element.classList.remove("blue");
        element.classList.add("red");
    } if (window.scrollY > 0) {
       //alert('not top');
       var element = document.getElementById("changeme");
    		element.classList.remove("red");
        element.classList.add("blue");
    }
}
＆＃13;
.red {
  color:red;
}
.blue {
  color:blue;
}
＆＃13;
<br>
<br>
<br>
<br>
<div id="changeme" class="red">
CHANGE ME
</div>
<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>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
＆＃13;
＆＃13;
＆＃13;