JSFiddle - React, Tailwind, and code Playground

by megarameno

HTML

<div id="wrapper">
    
    <div id="observed">a</div>
    
</div>
<div id="output"></div>

CSS

#wrapper {
    height:1000px;
    width:1000px;
}
#output {
    position: fixed;
    top:0;
    right:0;
    height:50px;
    width:500px;
    border:1px solid #000;
}
#observed{
    margin:100px 10px 0px 0px;
    border:1px solid #f00;
    height:30px;
    width:30px;
}

JavaScript

jQuery(function($){
	
    //this is the postion of bottom edge or observed emelemet
    var bottom = $("#observed").offset().top+$("#observed").height();
    //$("#output").html( "bottom: "+ bottom);
    
    $(window).scroll(function(){
        var thescroll = $(window).scrollTop();
        $("#output").text( "scroll: "+thescroll+"   bottom: "+ bottom);
        if(thescroll >= bottom){
            $("#output").css('color','#F00');
        }else{
            $("#output").css('color','#000');
        }
    } );
    
    
    
});