JSFiddle - React, Tailwind, and code Playground

by blue1086

HTML

<div id="header">
    Blah Blah
</div>
Page contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage...

CSS

body {
    background-color:red;
}
#header {
    height: 40px;
    font-size: 32px;
    text-align:center;
    background-color: transparent;
    transition: background-color 0.5s ease;
    position:fixed;
    top:0;
    width:100%;
}

.header_white {
    background-color: white !important;
}

JavaScript

$(window).scroll(function (e) {
    if ($(window).scrollTop() > 100) {
        $("#header").addClass('header_white');
    } else if ($("#header").hasClass('header_white')) {
        $("#header").removeClass('header_white');
    }
});