JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div class="sector-link" id="1">THING 1</div>
    <div class="sector-link" id="2">THING 2</div>
    <div class="sector-link" id="3">THING 3</div>
    <div class="sector-link" id="4">THING 4</div>
    <div class="sector-link" id="5">THING 5</div>
    <div class="sector-link" id="6">THING 6</div>
    <div class="sector-link" id="7">THING 7</div>
    <div class="sector-link" id="8">THING 8</div>
</div>

CSS

body {height:1100px;
}
.sector-link {
    display:none;
    margin-top: 50px;
    margin-bottom: 100px
}

JavaScript

$(window).scroll(function() {
       if ( $(document).scrollTop() > 1 ) {
             $('#1').fadeIn(800);     
       } else{
       		 $('#1').fadeOut(800); 
       }
       if ( $(document).scrollTop() > 50 ) {
             $('#2').fadeIn(800);     
       } else{
       		 $('#2').fadeOut(800); 
       }
       if ( $(document).scrollTop() > 100 ) {
             $('#3').fadeIn(800);     
       } else{
       		 $('#3').fadeOut(800); 
       }
       if ( $(document).scrollTop() > 150 ) {
             $('#4').fadeIn(800);     
       } else{
       		 $('#4').fadeOut(800); 
       }
       if ( $(document).scrollTop() > 200 ) {
             $('#5').fadeIn(800);     
       } else{
       		 $('#5').fadeOut(800); 
       }
       if ( $(document).scrollTop() > 300 ) {
             $('#6').fadeIn(800);     
       } else{
       		 $('#6').fadeOut(800); 
       }
       if ( $(document).scrollTop() > 350 ) {
             $('#7').fadeIn(800);     
       } else{
       		 $('#7').fadeOut(800); 
       }
       if ( $(document).scrollTop() > 400 ) {
             $('#8').fadeIn(800);     
       } else{
       		 $('#8').fadeOut(800); 
       }
       
  });