JSFiddle - React, Tailwind, and code Playground

by Mukul kant

HTML

<div>
    <div id="div1">
        A
    </div>
    <div id="div2">
        B
    </div><div id="div4">
       C
    </div>
    
</div>

CSS

body {
    height: 2000px;    
}
.a {
    height: 300px;
    width: 300px;
    background-color: green;
}
div{
  position:fixed
}

JavaScript

$(window).scroll(function() {
if ($(this).scrollTop() > 150 && $(this).scrollTop() < 250){
    $("#div1").css('visibility', 'hidden');
    $("#div2").css('visibility', 'visible');
    $("#div3").css('visibility', 'hidden');

}
 else if ($(this).scrollTop() > 250 ){
        $("#div1").css('visibility', 'hidden');
        $("#div2").css('visibility', 'hidden');
        $("#div3").css('visibility', 'visible');
 } 
else {
 $("#div1").css('visibility', 'visible');
 $("#div2").css('visibility', 'hidden');
 $("#div3").css('visibility', 'hidden');
 }

});