JSFiddle - React, Tailwind, and code Playground

HTML

<br><br><br><br><br><br><br>
<h2>1</h2>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2>2</h2>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2>3</h2>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2>4</h2>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2>5</h2>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

JavaScript

$(window).scroll(function() {
 var bodyTop = $(window).scrollTop() + 100;

 $('h2').each(function(i) {
  var thisTop = $(this).offset().top;
  if ( thisTop < bodyTop ) {
   if (!$(this).is('.faded')){
    $(this).addClass('faded').animate({ opacity: 0 });
   }
  } else {
   if ($(this).is('.faded')) {
    $(this).removeClass('faded').animate({ opacity: 1 });
   }
  }
 });
});