JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">HEADER</div>

CSS

.header{
    background-color: red;
    color: black;
    width: 100%;
    height: 80px;
    position: fixed;
    top: 0;
    left: 0;
}

.header .change{
    background-color: black;
    color: red;
}

JavaScript

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

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