JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

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;}


.wrapper {
height:2000px;
}

JavaScript

$(window).scroll(function() {    

    var scroll = $(window).scrollTop();

    if (scroll >= 500) {
      $(".clearHeader").addClass("darkHeader");
    } else{
        $(".clearHeader").removeClass("darkHeader");
    }
});