JSFiddle - React, Tailwind, and code Playground

by chauhangs

HTML

<div id="fixed">Bar</div>
<div id="scroll1"></div>
<div id="scroll2"></div>

CSS

#fixed{
    position:fixed;
    background-color:Yellow
    }
#scroll1{
   background-color:Green;
   width: 50px;
   height:800px
    
}
#scroll2{
   background-color:Blue;
   width: 50px;
   height:800px
    
}

JavaScript

$(window).scroll(function(){
    if($(window).scrollTop()<800){
        $('#fixed').css('background-color','Yellow');
    }else{
          $('#fixed').css('background-color','White');
    }
})