JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.githubusercontent.com/imakewebthings/waypoints/master/lib/jquery.waypoints.js"></script>
<div class="main">
	<div class="fixheight parallax">
        <div class="boxes">
            <h4 align="center"> Hello, I am the Fist Box</h4>
        </div>
    </div><!--each box-->
    
    <div class="parallax fixheight">
    	<div class="boxes" >
    		<h4 align="center"> Hello, I am the Second Box</h4>
        </div>
    </div><!--each box-->
    
    <div class="parallax" style="height: 1200px;">
    	<div class="boxes">
    		<h4 align="center">  Hello, I am the Third Box</h4>
        </div>
    </div><!--each box-->
    
    <div class="parallax fixheight">
    	<div class="boxes">
    		<h4 align="center"> Hello, I am the Fourth Box</h4>
        </div>
    </div><!--each box-->
    
    <div class="parallax fixheight">
    	<div class="boxes">
    		<h4 align="center"> Hello, I am the Fifth Box</h4>
        </div>
    </div><!--each box-->
    <div class="footer">
		<h4 align="center"> I am the Footer Content</h4>
    </div>
</div><!--end main-->

CSS

.position-0 {background:red}
.position-1 {background:blue}
.position-2 {background:green}
.position-3 {background:orange}
.position-4 {background:purple}
.parallax.why-you-no-working {
    background: #000;
}

JavaScript

$(document).ready(function(){
    
    /**Way Point Test **/
    $('.parallax:nth-of-type(2)').waypoint(function() {
		$(this).addClass('why-you-no-working');
		alert('I work');
	},{offset: '1%'}); 
    
    /*Other Stuff*/
	var mxwidth = $(window).width();
	var mxheight = $(window).height()/*screen.height*/;
	var topval = '';
	$('.fixheight').each(function(){
		topval = $(this).prev().height();
		$(this).css({ 'width': mxwidth, 'height': mxheight });
	}); 
	$('.boxes').each(function(){ 
		var top_position = $(this).offset().top;
		var postfix = 'data-'+ (top_position -4);
		var relfix = 'data-'+ (top_position -6);
		var parheight= $(this).parent().height();
		var index = $(this).parent().index();
		/*$(this).attr({
			data:'position:fixed', 
			data:'position:relative'
		});*/
		$(this).attr(relfix,'position:relative;z-index:1').attr(postfix,'position:fixed;z-index:999');
		$(this).css('height',parheight);
		$(this).parent().addClass('position-'+ index).attr('id','id-position-'+ index);
	}); 
    
});