JSFiddle - React, Tailwind, and code Playground

HTML

<div style="position:fixed;left:0; top:0;">
    <div class="sector-link">THING</div>
    <div class="sector-link">THING</div>
    <div class="sector-link">THING</div>
    <div class="sector-link">THING</div>
    <div class="sector-link">THING</div>
    <div class="sector-link">THING</div>
    <div class="sector-link">THING</div>
    <div class="sector-link">THING</div>
</div>

CSS

body {height:100000px;
}.sector-link {
    display:none;
}

JavaScript

/*$('.sector-link').each(function (i) {
    $(this).delay(350 * i).fadeIn(800);
});*/
/*
var cpt = 0;
$( window ).scroll(function() {
    cpt = cpt + 1;
    $('.sector-link:eq('+cpt+')').fadeIn(800);
});*/

var cpt = 0;
var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();

   if (st > lastScrollTop){
       $('.sector-link:eq('+cpt+')').fadeIn(800);
       cpt = cpt + 1;
   } else {
      cpt = cpt - 1;
      $('.sector-link:eq('+cpt+')').fadeOut(800);
       
   }
   lastScrollTop = st;
});