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>
<div>Текст</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>

CSS

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

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

JavaScript

var bar;
var scrollOur;
var scrollLimit = 200;// после этого значения происходит смена классов
var bar=document.getElementById('bar');


window.onScroll = tb();
    function tb(){ 
    scrollOur=document.body.scrollTop;
        if (scrollOur>scrollLimit){
            bar.setAttribute('class','scroll');
        } 
    }