JSFiddle - React, Tailwind, and code Playground

HTML

<div id='nav'>Header</div>
<div id='container'>
    <div id='cat'></div>
    <div id='content'>
         <h1>Header Here</h1>
        <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
        <p>D'aw, kittens are so cute.</p>
    </div>
</div>

CSS

body {
    overflow-x:hidden;
}
#nav {
    position:fixed;
    width:100%;
    height:50px;
    text-align:center;
    top:0px;
    z-index:2;
    left:0px;
    background:teal;
    transition:top .3s;
}
#container {
    position:absolute;
    top:200px;
    width:100%;
    height:500px;
}
#cat {
    background: url(http://wallpapersfor.me/wp-content/uploads/2012/02/cute_cat_praying-1280x800.jpg);
    background-repeat:no-repeat;
    background-position:center;
    width:100%;
    height:100%;
}
#content {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    opacity:0;
    text-align:center;
    background:rgba(62, 165, 206, 0.9);
    transition:all .5s
}
#content:hover {
    opacity:1;
}

JavaScript

var wind = this, // Gets window object
    last = 0,    // The last read top value
    delay = 150, // The delay for the setInterval
    threshold = 30;    // The max scroll distance before showing/hiding the nav

// I always set a variable to my setIntervals in case I want to stop them later on
var navMovement = setInterval(function() {
    var $nav = $('#nav'), // Gets nav object
        $window = $(wind); // Makes the window object a jQuery object
    if($window.scrollTop() - last < -threshold) { // Happens if the difference in scroll is below the negative threshold
        $nav.css({ // Put the nav at the top of the window
            top: 0
        });
    }
    else if($window.scrollTop() - last > threshold){ // Happend if the difference in scroll is above the threshold
        $nav.css({ // Hides the navigation
            top: -$nav.height()
        });
    }
    last = $window.scrollTop(); // Updates the previous scroll value
}, delay); // Runs every `delay` amount