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

function followTo(elem, pos) {
    var $this = document.getElementById(elem);
    
    window.onscroll = function(e){
        var disFromTop = document.all? iebody.scrollTop : pageYOffset;
        if (disFromTop > pos) {
            $this.style.position = 'absolute';
            $this.style.top = pos + 'px';
        } else {
            $this.style.position = 'fixed';
            $this.style.top = 0;
        }
    };
};

followTo("nav", 100);