JSFiddle - React, Tailwind, and code Playground

by Tushar Jadhav

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>
    <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: 10px;
    background: #f5f5f5;
    float: left;
    margin: 10px;
}
ul li.middleviewport {
    background: red;
}

JavaScript

$(document).ready(function () {
    var windowHeight = $(window).height(),
        gridTop = windowHeight * .1,
        gridBottom = windowHeight + $('ul li:last').height();
    $(window).on('scroll', function () {

        var $this = $('ul li:last');
        var thisTop = $this.offset().top - $(window).scrollTop();

        if (thisTop > gridTop && (thisTop + $this.height()) < gridBottom) {
            $this.css('background', 'red');
            console.log('In sight');
        } else {
            $this.css('background', 'gray');
            console.log('Not still');
        }
    });
});