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