JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    Scroll Down
    <div class="inner">
        
    </div>
</div>

CSS

.wrapper {
    height: 10000px;
    width: 100vw;
    position: relative;
}

.inner {
    position: absolute;
    width: 100vw;
    height: 200px;
    top: 1500px;
    background: green;
}

.inner.active {
    background: red;
}

JavaScript

$(document).ready(function() {
    var inner = $(".inner");
    var elementPosTop = inner.position().top;
    var viewportHeight = $(window).height();
    $(window).on('scroll', function() {
        var scrollPos = $(window).scrollTop();
        var elementFromTop = elementPosTop - scrollPos;
        
        if (elementFromTop > 0 && elementFromTop < elementPosTop + viewportHeight) {
            inner.addClass("active");
        } else {
            inner.removeClass("active");
        }
    });
})