JSFiddle - React, Tailwind, and code Playground

by nikolya223

HTML

<div id="bar" class="bar"></div>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>

CSS

#bar{
width: 500px;
height:90px;
background:grey;
}

.bar {position: relative;}
.scroll {
    position: fixed; 
    box-shadow: 2px 2px 5px gold;
}

JavaScript

var bar;
var scrollOur;

$(window).scroll(function(){ 
 scrollOur= $(window).scrollTop();
    if (scrollOur>400){
    $('#bar').addClass("scroll");
    $('#bar').removeClass("bar");
    } else {
    $('#bar').addClass("bar");
    $('#bar').removeClass("scroll");
    }
 });