JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Please note I am using jQuery.  -->

<header class="header">
    <ul class="header-ul">
        <li>List one</li>
        <li>List two</li>
    </ul>
    <h3 class="brand">Brand</h3>
</header>

<div class="main">
</div>

CSS

body {
    margin-top: 0;
}
.header {
    position: fixed;
    right: 0;
    left: 0;
    margin: 0;
    min-height: 50px;
    padding: 10px;
    background-color: #428bca;
}
.header.scrolling {
    background-color: #5cb85c;
}
.header .brand {
    display: inline-block;
    font-size: 16px;
}
.header-ul {
    list-style: none;
    float: right;
}
.header-ul > li {
    display: inline-block;
}
.main {
    height: 2000px;
}

JavaScript

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

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