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

Question

我有一个包含 4 个 DIV 的页面，每个 DIV 的高度为 100vh，即 400vh。 我想根据页面顶部的滚动向每个 DIV 添加特定的 class 。 例如，从顶部开始的 0-100vh，class 将添加到第一个 div，100-200vh class 将添加到第二个 div（并从第一个 div 中删除）等。不想使用任何库，只是香草 JS）？ :)

我试着用谷歌搜索它，但我没有发现任何对我有用的东西，只有一些 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如果在视口特定的 class 添加元素，当超出视口时它将被删除。

 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>