JSFiddle - React, Tailwind, and code Playground

HTML

<div id="abs"></div>sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br /><span id="trigger">0</span>sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f<br />sdfjkh sdfjks f

CSS

#abs{
    position:fixed;
    top:10px;
    left:10px;
    border:1px solid red;
    background-color:#fff;
    font-weight:bold;
    width:100px;
    height:30px;
    color:black;
    overflow:hidden;
}
#trigger{
    color:red;
    font-weight:bold;
}

JavaScript

$(window).scroll(function(){
    
    $window = $(window);
    
    var visibleTop = $window.scrollTop();
    var visibleBottom = visibleTop + $window.height();
    
    var elementTop = $('#trigger').offset().top;
    if ( elementTop > visibleTop && elementTop < visibleBottom)
        $('#abs').text('visible')
    else
        $('#abs').text('');
    
});