JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div class="red">foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
</div>

CSS

body, html {
    margin: 0;
    padding: 0;
}
.red {
    background-color: red;
}

JavaScript

function isScrolledIntoView(elem) {
    var $elem = $(elem);
    var $window = $(window);

    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();

    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$(function () {
    $(window).scroll(function () {
        if (isScrolledIntoView('.red')) {
            $('.wrapper').css('background-color', 'green');
        }
    });
});