我有一个包含4个DIV的页面,每个DIV的高度为100vh,即400vh。我想根据页面顶部的滚动向每个DIV添加一个特定的类。例如,从顶部开始0-100vh,类将添加到第一个div,100-200vh类将添加到第二个div(并从第一个div删除),等等。有人可以为此共享一个javascript代码吗(我不想使用任何库,仅使用香草JS)? :)
我尝试使用Google,但没有发现对我有用的东西,只有一些jQuery脚本...
<div></div>
<div></div>
<div></div>
<div></div>
<style>
div {
height: 100vh;
}
.addThis {
background-color: red;
}
</style>
只想将class .addThis添加到div之一,取决于从顶部滚动。
答案 0 :(得分:0)
如果在视口特定类中添加了元素,则使用getBoundingClientRect().top
,当视口外的类中的元素将被删除。
window.onscroll = function() {
var elem = document.getElementsByTagName("div");
for(i=0;i<elem.length;i++){
if(elem[i].getBoundingClientRect().top <= 0){
for(j=0;j<elem.length;j++){
elem[j].classList.remove("addThis")
}
elem[i].classList.add("addThis")
}
}
}
body{
margin:0
}
*{
box-sizing:border-box
}
div {
width:100%;
height: 100vh;
border-bottom:5px solid;
background:grey
}
.addThis {
background-color: red;
}
<div></div>
<div></div>
<div></div>
<div></div>