JSFiddle - React, Tailwind, and code Playground

HTML

<div class="element">1</div>
<div class="element">2</div>
<div class="element">1</div>
<div class="element">2</div>
<div class="element">1</div>
<div class="element">2</div>
<div class="element">1</div>
<div class="element">2</div>
<div class="element">1</div>
<div class="element">2</div>

CSS

.padding-element {
    height: 1000px;
}
.element {
    width:150px;
    height:300px;
    float:left;
    margin:10px;
    background-color:red;
}
.blue {
    background-color:blue;
}

JavaScript

$(window).scroll(function () {


    var windowSize = $(window).height();
    var windowPosition = $(window).scrollTop();
    var control = $(".element");
    control.each(function () {
        var elementPosition = $(this).position().top;
        var elementHeight = $(this).height();
        var elementInWindow = (windowSize + windowPosition > elementPosition) - (windowPosition - elementHeight < elementPosition);
        if (elementInWindow == 0) {
            $(this).addClass("blue");
        } else {
            $(this).removeClass("blue");
        }
    });

});