JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>

CSS

body{
      height: 200vh;
      padding-top: 400px;
  }
  .box{
      height: 100px;
      border: 1px solid #000;
      margin-top: 200px;
  }

JavaScript

window.addEventListener('scroll', changeBg);
var boxes = document.querySelectorAll('.box');
var viewHeight = document.documentElement.clientHeight;
 
function changeBg() {
    for (var i = 0; i < boxes.length; i++) {
        var item = boxes[i];
        var itemTop = item.getBoundingClientRect().top;
        if (itemTop < viewHeight / 2) {
            item.style.backgroundColor = "red";
        } else {
            item.style.backgroundColor = "transparent";
        }
    }
}