JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
    MAIN NAV
</div>
asd<br>asd<br>asd<br>asd<br>asd<br>asd<br>asd<br>
asd<br>asd<br>asd<br>asd<br>asd<br>asd<br>asd<br>
asd<br>asd<br>asd<br>asd<br>asd<br>asd<br>asd<br>
asd<br>asd<br>asd<br>asd<br>asd<br>asd<br>asd<br>
asd<br>asd<br>asd<br>asd<br>asd<br>asd<br>asd<br>
asd<br>asd<br>asd<br>asd<br>asd<br>asd<br>asd<br>
asd<br>asd<br>asd<br>asd<br>asd<br>asd<br>asd<br>
asd<br>asd<br>asd<br>asd<br>asd<br>asd<br>asd<br>
asd<br>asd<br>asd<br>asd<br>asd<br>asd<br>asd<br>
asd<br>asd<br>asd<br>asd<br>asd<br>asd<br>asd<br>

CSS

#nav {
    border: 1px solid red;
   height: 30px;
    position: fixed;
    top: 60px;
    width: 100%;
}

#nav.sub-60 {
    border: 1px solid blue;
}

JavaScript

$(document).ready(function(){
    $(window).scroll(function(){
        $("#nav").css("top", ($(window).scrollTop() < 60 ? (60 - $(window).scrollTop()) : 0) + 'px');
        if ($(window).scrollTop() > 60) {
            $("#nav").addClass('sub-60').text('WOOT!');
            console.log('derp');
        }
        else {
            $("#nav").removeClass('sub-60').text('MAIN NAV');
        }
    });
});