JSFiddle - React, Tailwind, and code Playground

HTML

<span id="log"></span>
<div id="onTop"> </div>
<div id="below"> </div>

CSS

#onTop{
    padding: 2px;
    margin: 10px;
    background-color: #999;
    border: solid 1px #333;
    height: 800px;
}

#below{
    padding: 2px;
    margin: 10px;
    background-color: #777;
    border: solid 1px #333;
    height: 600px;
}

#log{
    position: fixed;
    top: 10px;
    right: 5px;
    padding: 2px;
    margin: 10px;
    background-color: #bb0;
    border: solid 1px #333;
    height: 15px;
    width: 70px;
}

JavaScript

function scrolledTo(el, shownCallback, hiddenCallback) {
    var isVisible = false;
    var isScrolledTo = function(){
       var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

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

        return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)); 
    }
    
    $(window).scroll(function(){
        if(isScrolledTo()){
            if(!isVisible){
                isVisible = true;
                if(shownCallback)(shownCallback());
            } 
        } else {
            if(isVisible){
                isVisible = false;
                if(hiddenCallback)(hiddenCallback());
            } 
        }
    });
}

scrolledTo("#below", 
           function(){
               $('#log').text("Shown");
           }, 
           function(){
               $('#log').text("Hidden");
           });