JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
    <div class="content">
        <img id="fg-img" src="http://placehold.it/500x300" />
        <img class="banner" src="http://placehold.it/960x300" />
        <img id="under-banner" src="http://placehold.it/960x18" />
    </div>
</div>
<div id="sticky-nav">
    <div id="nav">
        <div class="wrap">
            <div class="social"></div>
        </div>
    </div>
</div>
<div id="cont">
    <ol>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ol>
</div>

CSS

body {
    margin: 0
}
ol {
    margin: 10px;
    padding: 0 0 0 20px
}
.content {
    width: 960px;
    margin: auto;
}
#sticky-nav{
    min-height: 105px;
}
#fg-img {
    z-index: 1;
    position: absolute;
    margin-left: 40px;
    vertical-align: bottom;
    border: 0;
    display: block;
}
#header .banner {
    z-index: 0;
    position: absolute;
}
#n{
    min-height: 60px;
}
#header {
    width: 100%;
}
#header .content {
    height: 318px;
}
#header .content #under-banner {
    z-index: 0;
    padding-top: 300px;
    vertical-align: bottom;
    clear: none;
    display: block;
}
#nav {
    width: 100%;
    min-width: 960px;
}
#nav .social {
    height: 59px;
    background-color: #000000;
    margin-left: 15px;
    margin-right: 15px;
}
#nav .wrap {
    height: 106px;
}
#under-nav {
    height: 16px;
}

JavaScript

$(function () {
    var nav_offset_top = $('#nav').offset().top;
    var nav = function () {
        var scroll_top = $(window).scrollTop();
        var width = $(window).width();
        if (scroll_top < 195) {
            $('#fg-img').css({
                'position': 'absolute',
                    'top': 0
            });
            $('#nav').css({
                'position': 'relative'
            });
        } else if (scroll_top < 265) {
            $('#fg-img').css({
                'position': 'fixed',
                    'top': -195
            });
            $('#nav').css({
                'position': 'relative'
            });
        } else if (scroll_top < nav_offset_top) {
            $('#fg-img').css({
                'position': 'fixed',
                    'top': 70 - scroll_top
            });
            $('#nav').css({
                'position': 'relative'
            });
        } else {
            $('#nav').css({
                'position': 'fixed',
                    'top': 0
            });
            $('#fg-img').css({
                'position': 'fixed',
                    'top': -247
            });
        }

    };
    nav();
    $(window).scroll(function () {
        nav();
    });

});