Question

我有一个包含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之一，取决于从顶部滚动。

Answer 1

如果在视口特定类中添加了元素，则使用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>

将类添加到香草JS滚动中的特定元素

1 个答案: