JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

.my-class{
   background-color:black;
}

JavaScript

$(window).scroll(function(){
    if($('#scroll1').scrollTop() >50){
        $('#logo').addClass("my-class");
    }else{
          $('#logo').removeClass("my-class");
    }
})