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

var target = $('#fixed');
var targetHeight = target.outerHeight();

$(window).scroll(function(){
    
    var border = (20-(800 - window.scrollY));
    
    console.log(border);
    if($(window).scrollTop()<800){
        $('#fixed').css('background-color','Yellow');
        if(border>0){
          $('#fixed').css('border-bottom',border+'px Solid red');
              $('#fixed').css('height','20px');
        }
         if(border<0){
          $('#fixed').css('border-bottom','0px');
               $('#fixed').css('height','20px');
        }
    }else{
          $('#fixed').css('background-color','Red');
         if(border<20){
          $('#fixed').css('border-top',border+'px Solid Yellow');
             $('#fixed').css('height','20px');
        }
         if(border>20){
          $('#fixed').css('border-bottom','0px');
               $('#fixed').css('height','20px');
        }
    }
})