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="nav">
      <div class="wrap">
        <div class="social">
        </div>
      </div>
    </div>
    <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>

CSS

body {margin: 0}
ol {margin: 10px; padding: 0 0 0 20px}

.content{
    width: 960px;
    margin: auto;
}
#fg-img{
	z-index: 1;
	position: absolute;
	margin-left: 40px;
	vertical-align: bottom;
	border: 0;
	display: block;
}
#header .banner{
	z-index: 0;
	position: absolute;
}

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

});