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="heading scroll-fade-1">header 1</h1>
<br><br>
<h2 class="heading  scroll-fade-2">header 2</h2>
<br><br>
<h3 class="heading scroll-fade-3">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

$(window).on('scroll', function(){
        var st = $(this).scrollTop();
        for(i=1; i<=3; i++){
            $('.scroll-fade-'+i).css({
                'opacity' : 1 - st/(i*100),
                'margin-top': -(st/3)+"px"
            });
        }
    });