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 remember = 0;
	var $element_array = $("#content").find("div");
	$(window).scroll(function(){

    	$element_array.each (function(){
            if (($(this).position().top+ $(this).height()) < $(window).scrollTop()){
                $(this).fadeIn();}
            if (($(this).position().top ) > $(window).scrollTop())
            	$(this).fadeOut();
    	});
    
	});
});