JSFiddle - React, Tailwind, and code Playground

by ult_combo

HTML

<header class="clearHeader">
</header>

<div class="wrapper">
</div>

CSS

.clearHeader{
height: 200px; 
background-color: rgba(107,107,107,0.66);
position: fixed;
top:200;
width: 100%;

}


.darkHeader {
    height: 100px;
background-color: rgba(107,107,107,0.66);
position: fixed;
top:200;
width: 100%;

}


.wrapper {
height:2000px;
}

JavaScript

$(function() {
    var header = $(".clearHeader");
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();
    
        if (scroll >= 500) {
            header.removeClass('clearHeader').addClass("darkHeader");
        } else {
            header.removeClass("darkHeader").addClass('clearHeader');
        }
    });
});