JSFiddle - React, Tailwind, and code Playground

HTML

<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></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

div{
     height: 50px;
  width: 400px;
   border: 1px solid red; 
}

.current{
    background-color: blue;
}

JavaScript

$(document).scroll(function() {
    var cutoff = $(window).scrollTop();
    
    $('div').each(function(){
        if($(this).offset().top + $(this).height() > cutoff){
            $('div').removeClass('current');
            $(this).addClass('current');
            return false; // stops the iteration after the first one on screen
        }
    });
});