JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
<div id="box6"></div>

CSS

#box1, #box2, #box3, #box4, #box5, #box6 {
    width: 100px;
    height: 100px;
    background: orange;
    margin:100px auto;
}
#box6 {
    margin-bottom:600px;
}

JavaScript

$(window).scroll(function () {
    $('[id^="box"]').each(function () {
        if (outOfBounds( $(this) )) {
            $(this).stop().fadeTo(400, 0);
        } else {
            $(this).stop().fadeTo(400, 1);
        } 
        
    });
});

function outOfBounds($element){
    return $element.offset().top < $(window).scrollTop() || $element.offset().top + $element.height() > $(window).scrollTop() + $(window).height();
}