JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

ul {
    margin: auto;
}
ul li {
    width: 300px;
    height: 30px;
    background: silver;
    float: left;
    margin: 10px;
    list-style:none;
}
ul li.middleviewport {
    background:red;
}

JavaScript

$(document).ready(function () {
        $(window).on('scroll', function () {
            var windowHeight = $(window).height(),
                gridTop = windowHeight * .3,
                gridBottom = windowHeight * .6;
            $('ul li').each(function () {
                var thisTop = $(this).offset().top - $(window).scrollTop();

                if (thisTop > gridTop && (thisTop + $(this).height()) < gridBottom) {
                    $(this).css('background', 'red');
                } else {
                    $(this).css('background', 'silver');
                }
            });
        });
        $(window).trigger('scroll');
    });