JSFiddle - React, Tailwind, and code Playground

by Girisha Chennura

HTML

<div></div>
<div></div>
<div class="watch"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

div {
    background: black;
    width: 100px;
    height: 50px;
    border: 1px solid gray;
}
div.watch {background: white;}
div.red {background: red;}

JavaScript

$(window).scroll(function() {
  console.log($("div.watch")[0].getBoundingClientRect());
  if ($("div.watch")[0].getBoundingClientRect().bottom - 75 < 0) {
    $(".watch").addClass("red");
  }
  else {
    $(".watch").removeClass("red");
  }
});