JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dark-scroll div1"></div>
<div class="dark-scroll div2"></div>
<div class="dark-scroll div3"></div>
<div class="dark-scroll div4"></div>
<div class="dark-scroll div5"></div>

<div id="log"></div>

CSS

div {
  width: 500px;
  height: 200px;
}
.dark-scroll {
  background-color: black;
  border: 3px solid;
}

.div1 {
  border-color: green;
}
.div2 {
  border-color: yellow;
}
.div3 {
  border-color: red;
}
.div4 {
  border-color: blue;
}
.div5 {
  border-color: grey;
}
.light {
  background-color: white;
}

#log {
  position: fixed;
  top: 30px;
  left: 550px;
}

JavaScript

$(document).on('scroll', function() {
    let doc = $(this);
    let log = $('#log');
    let doc_scroll = doc.scrollTop();
    log.html('scrollTop: ' + doc_scroll + '<br>');
    $('.dark-scroll').each(function() {
        let dark = $(this);
        let dark_top = dark.offset().top;
        let dark_height = dark.innerHeight();
        log.html(log.html() + '<br>' + 'offsetTop: ' + dark_top);
        
        let cond = doc_scroll > dark_top && doc_scroll < (dark_top + dark_height);
        dark.toggleClass('light', !cond);
  });
});