JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
	<div id="bg1"></div>
	<div id="bg2"></div>
	<div id="bg3"></div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

CSS

html,body{height:100%;margin:0;}
	#content{
		background:#333333;
		height:2000px;
		z-index:1;
	}
	#bg1{
		background:blue;
		height:400px;
		width:100%;
		z-index:2;
		position:fixed;
		top:100px;
		display: none;
	}
	#bg2{
		background:green;
		height:400px;
		width:100%;
		z-index:3;
		position:fixed;
		top:200px;
		display: none;
	}
	#bg3{
		background:red;
		height:400px;
		width:100%;
		z-index:4;
		position:fixed;
		top:300px;
		display: none;
	}

JavaScript

$(document).ready(function(){
	var $element_array = $("#content").find("div");
    var fades = 0;
	$(window).scroll(function(){
    	$element_array.each (function(){
        	if (($(this).position().top + $(this).height()) < $(window).scrollTop() && (fades == 0))
                $(this).fadeIn(function(){fades = 1;});
            if (($(this).position().top + $(this).height()) > $(window).scrollTop() && (fades > 0))
                $(this).fadeOut(function(){ fades = 0; });
    	});
	});
});