JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav">
Sticky top navigation bar
</div>
<div class="wrap">
<h3>Some filler text</h3>
Bacon ipsum dolor sit amet mollit ball tip occaecat brisket cupidatat meatball capicola. Capicola rump turducken, elit shankle cupidatat pastrami duis fatback. Sint occaecat kielbasa labore pastrami corned beef. Sunt swine bacon, fugiat dolor aute anim jerky nostrud et venison shankle consectetur boudin landjaeger.
Pork chop sed turkey aute, duis corned beef pariatur short loin proident culpa. Capicola filet mignon fugiat corned beef shank ea, commodo doner adipisicing eu salami. Doner laboris pariatur beef ribs non id. Andouille eu meatball consectetur ham hock. Ea dolore cillum cow pork loin aliquip leberkas id est corned beef dolore t-bone. In salami jerky cupidatat et.
Ham hock irure reprehenderit chicken drumstick sausage ad, pig elit salami. Tri-tip consectetur t-bone salami, sunt jerky exercitation ham ut tempor nostrud enim. Beef ribs enim esse do non sausage. Chuck anim spare ribs ut ad deserunt, tri-tip chicken bacon tongue ball tip. Est tongue doner eiusmod veniam sint tenderloin deserunt bresaola strip steak fugiat proident pastrami.
    <p>Mollit turkey pork chop, drumstick tongue shank pastrami tempor. Reprehenderit consequat excepteur, in eiusmod ut incididunt short loin adipisicing tenderloin capicola fugiat. Ut non short ribs ball tip. Elit beef non flank reprehenderit hamburger. Fatback drumstick pancetta magna shankle corned beef pastrami spare ribs. Quis dolore beef non, veniam aliqua sirloin consectetur laboris shoulder pork leberkas short loin. Rump qui beef spare ribs drumstick andouille duis est esse irure strip steak labore.</p>
<p>Tongue filet mignon pancetta, elit pariatur nostrud deserunt excepteur tri-tip salami in nisi. Ball tip beef fugiat, mollit officia jerky sirloin chuck dolore. Sausage fugiat spare ribs, tongue pork belly ut in. T-bone fatback anim nisi minim culpa laboris andouille meatball ham ut.</p>
    <p>Et turducken pork loin...

CSS

body {
font-family: "Rokkitt", Helvetica, Arial, sans-serif;
font-size: 18px;
line-height: 20px;
background: #f8f8f0;
margin: 0;
}
.darkHeader {
background-color: black !important; 
    position: fixed;
}
.nav {
width: 100%;
background-color: wheat;
padding: 10px;
}
.menu {
float: right;
cursor: pointer;
margin-top: -8px;
}
#content {
margin-top: 150px;
padding-top: 20px;
}
.wrap {
max-width: 800px;
margin: 0 auto;
padding: 0 40px;
}
#top span {
white-space: nowrap;
}
pre {
border: 1px solid #ccc;
border-radius: 4px;
background: #f0f0f0;
padding: 0.5em;
overflow: auto;
}

JavaScript

// Script
lastScroll = 0;
$(window).on('scroll',function() {    
    var scroll = $(window).scrollTop();
    if(lastScroll - scroll > 0) {
        $(".nav").addClass("darkHeader");
    } else {
        $(".nav").removeClass("darkHeader");
    }
    lastScroll = scroll;
});