JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    
	<header>
	HEADER
	</header>
<div id=wrapper>
	<div id=content>
		<section id="test">
		<h2><a href="#goods">content</a></h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque posuere non velit vitae blandit. Proin quis dui facilisis, pellentesque libero vel, fermentum mauris. Proin quis aliquam turpis. Aliquam pellentesque pretium erat, id placerat ante vestibulum mollis. Pellentesque interdum finibus facilisis. Nullam feugiat aliquet nunc eu cursus. Duis consequat orci ac imperdiet varius. Vivamus eget nunc eget lectus vehicula scelerisque in quis felis. In fringilla in nisl vel commodo. Quisque a tempus ligula. Phasellus pulvinar lorem non metus bibendum finibus. Maecenas sit amet est ac justo varius lobortis vehicula in turpis. Donec fermentum a odio nec eleifend. Fusce ut nulla efficitur, placerat enim ut, pharetra lacus. </p>
		</section>


		<section id="test1">
		<h2>
		content</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque posuere non velit vitae blandit. Proin quis dui facilisis, pellentesque libero vel, fermentum mauris. Proin quis aliquam turpis. Aliquam pellentesque pretium erat, id placerat ante vestibulum mollis. Pellentesque interdum finibus facilisis. Nullam feugiat aliquet nunc eu cursus. Duis consequat orci ac imperdiet varius. Vivamus eget nunc eget lectus vehicula scelerisque in quis felis. In fringilla in nisl vel commodo. Quisque a tempus ligula. Phasellus pulvinar lorem non metus bibendum finibus. Maecenas sit amet est ac justo varius lobortis vehicula in turpis. Donec fermentum a odio nec eleifend. Fusce ut nulla efficitur, placerat enim ut, pharetra lacus. </p>
		</section>

	</div>
</div>

</body>

CSS

body,section,h2,p {
    border: 0 none;
    font: inherit;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

#content {
    background: none repeat scroll 0 0 rgba(250, 250, 250, 1);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 40%;
    width: 100%;
    z-index: 2;
}


header {
    background: url("https://farm6.staticflickr.com/5591/14807644072_4a036a3be4_c.jpg") no-repeat scroll 0 0 rgba(255, 0, 0, 1);
    position:fixed;
    height:50%; 
    width:100%; 
    left:0; 
    top:0; 
    z-index: 1;
}

section {
    display:block;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    float: left;
    font-size: 16px;
    line-height: 24px;
    padding: 200px 0 75px;
    position: relative;
    width: 100%;
}

section:first-child {
    border-top: medium none;
}
p {
    margin: 0 auto 38px;
    width: 600px;
}
#wrapper{
    height:100%;
    width:100%;
}

JavaScript

jQuery(document).ready(function($) {

var scrollheight = $(window).height() * 0.2;
		$(window).scroll(function () {

		if ($(window).scrollTop() >= scrollheight){
			$(window).scrollTop(scrollheight);
			$("#content").css("overflow-y","scroll");
			$("#content").css("height","100%");
			$("#content").scrollTop(10);
            
            var vcontentWidth = document.getElementById("content").scrollWidth;
    		document.getElementById("wrapper").style.width = vcontentWidth + "px";
		}
            //revert if scrolled back:
		if ($("#content").scrollTop() < 10){
					
			$("#content").css("overflow","hidden");
			$("#content").css("height","auto");

		}		

		});


	});