JSFiddle - React, Tailwind, and code Playground

by pevans02

HTML

<div class="foxedDiv" data-position="900,1800">
    MESSAGE 1
</div>

<div class="foxedDiv" data-position="1801,2500">
    MESSAGE 2
</div>

CSS

body
{
    height:3000px; 
}
.foxedDiv
{
    display:none; 
    position:fixed; 
    top:10px; 
    left:10px; 
}
.foxedDivved
{
    display:none; 
    position:fixed; 
    top:10px; 
    left:10px; 
}

JavaScript

//Note you do not need to make an anonymous
//function just to do the call for checkY
//just pass the function
$(window).scroll(checkY);

function checkY(){
    //save this value so we dont have to call the function everytime
    var top = $(window).scrollTop();
    console.log(top); 
    $(".foxedDiv").each(function(){
        var positionData = $(this).data("position").split(",");
        if(top > positionData[0] && top <= positionData[1]){
            console.log("Show"); 
            $(this).show(); 
        } else {
            console.log("Hide"); 
            $(this).hide();
        }       
    });
}
checkY();