JSFiddle - React, Tailwind, and code Playground

by Mostafa Zeinivand

HTML

<div id="diva"> diva </div>
<div id="divb"> divb </div>
<div id="divc"> divc </div>

<br/><br/><br/><br/><br/><br/><br/>

CSS

body{
    padding:0px;
}
#diva,#divb,#divc{
    display:block;
    margin-bottom:10px;
    position:relative;
    width:400px;
    height:400px;
}
#diva{
    background:grey;
}
#divb{
    background:green;
}
#diva{
    background:red;
}

JavaScript

$(window).scroll(function() {
    
    if($(window).scrollTop()>=828) {
        $("#divc").css({ "background":"black"} );
        $("#diva").css({ "background":"red"} );
        $("#divb").css({ "background":"green"} );
    }
    else if($(window).scrollTop()>=418) {
        $("#divb").css({ "background":"black"} );
        $("#diva").css({ "background":"red"} );
        $("#divc").css({ "background":"gray"} );
    }
    else if($(window).scrollTop()>8) {
        $("#diva").css({ "background":"black"} );
        $("#divb").css({ "background":"green"} );
        $("#divc").css({ "background":"gray"} );
    }
    else{
        $("#diva").css({ "background":"red"} );
    }
});