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;
}
#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;

$.fn.followTo = function ( pos ) {
    var $this = this,
        $window = $(wind);

    $window.scroll(function(e){
        if ($window.scrollTop() > pos) {
            $this.css({
                position: 'absolute',
                top: pos
            });
        } else {
            $this.css({
                position: 'fixed',
                top: 0
            });
        }
    });
};

$('#nav').followTo(100);