JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<head></head>
<body id="body">
	<div class="container">
		<div id="block1">block1</div>
		<div id="block2">block2</div>
		<div id="block3">block3</div>
		<div id="block4">block4</div>
	</div>
</body>
</html>

CSS

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, del, dfn, em, img, ins, kbd, q, samp, small, strong, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, footer, header, nav, section {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  background:transparent;
}

body {
	font-family: 'Open Sans','Lucida Grande';
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	line-height: 1.4;
}

.container {
	background-color: #EEE;
}

.container > div {
	width:100%;
	min-height: 500px;
	color: #444;
	font-size: 28px;
	text-align: center;
	top: 0;
}

#block1 {
	background-color: #6ebcd0;
	z-index: 1;
}

#block2 {
	background-color: #55b18e;
	z-index: 2;
}

#block3 {
	background-color: #e65748;
	z-index: 3;
}

#block4 {
	background-color: #CCC;
	/*#e8e8e8*/
	z-index: 4;
}

JavaScript

$(document).ready(function() {
	$(window).scroll(function () {
		
		var scrollY = $(window).scrollTop();
		
        if(scrollY >= 0 && scrollY < 500){
			$('#block1').css({'position': 'fixed', 'margin-top': '0'});
            $('#block2').css({'position': 'relative', 'margin-top': '500px'});
		}
        
		if(scrollY >= 500 && scrollY < 1000){
			$('#block2').css({'position': 'fixed', 'margin-top': 0});
			$('#block3').css({'position': 'relative', 'margin-top': '1000px'});
		}
		
		if(scrollY >= 1000 && scrollY < 1500){
			$('#block3').css({'position': 'fixed', 'margin-top': 0});
			$('#block4').css({'position': 'relative', 'margin-top': '1500px'});
		}
		
	});
	
});