JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

JavaScript

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

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