JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<br><br><br>
<h1 class="scroll-fade">header 1</h1>
<br><br>
<h2 class="scroll-fade-long">header 2</h2>
<br><br>
<h3 class="scroll-fade-long-2">header 3</h3>



<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

JavaScript

jQuery(function($){		
//Scroll fade
		var divs = $('.scroll-fade');
		$(window).on('scroll', function() {
			var st = $(this).scrollTop();
			divs.css({ 
				'margin-top' : -(st/3)+"px", 
				'opacity' : 1 - st/135
        		}); 
		});
		
		//Scroll fade long
		var divs = $('.scroll-fade-long');
		$(window).on('scroll', function() {
			var st = $(this).scrollTop();
			divs.css({ 
				'margin-top' : -(st/3)+"px", 
				'opacity' : 1 - st/255
			}); 
		});


		//Scroll fade long2
		var divs = $('.scroll-fade-long-2');
		$(window).on('scroll', function() {
			var st = $(this).scrollTop();
			divs.css({ 
				'margin-top' : -(st/3)+"px", 
				'opacity' : 1 - st/355
			}); 
		});
});