JSFiddle - React, Tailwind, and code Playground

HTML

<div class="foxedDiv">
    MESSAGE 1
</div>

<div class="foxedDivved">
    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

var startY1 = 900;
var stopY1 = 1800;
var startY2 = 1801;
var stopY2 = 2500;

$(window).scroll(function(){
    checkY();
});

function checkY()
{
    console.log($(window).scrollTop()); 
    if($(window).scrollTop() > startY1 && $(window).scrollTop() <= stopY1)
    {
        console.log("Show"); 
        $('.foxedDiv').show(); 
    }
    else
    {
        console.log("Hide"); 
        $('.foxedDiv').hide();
    }
    
    if($(window).scrollTop() > startY2 && $(window).scrollTop() <= stopY2)
    {
        console.log("Show"); 

        $('.foxedDivved').show(); 
    }
    else
    {
        console.log("Hide"); 
        $('.foxedDivved').hide();
    }
}

checkY();