JSFiddle - React, Tailwind, and code Playground

HTML

<p id="debug">n/a</p>

<ul id="items">
    <li class="item item01">1</li>
    <li class="item item02">2</li>
    <li class="item item03">3</li>
    <li class="item item04">4</li>
    <li class="item item05">5</li>
    <li class="item item06">6</li>
    <li class="item item07">7</li>
    <li class="item item08">8</li>
</ul>

CSS

body { height:3000px; }


ul#items { width:200px; height:200px; position:fixed; top:10px; left:10px; }
ul#items li.item {background-color:#dddddd; display:block; height:100%; left:0; position:absolute; right:0; width:100%;}

p#debug {position:fixed; right:10px; text-align:right; top:10px; }

JavaScript

var oDebug = $('p#debug');
      var oItemsContainer = $('ul#items');
      $(window).scroll(function(e) {
        var iScrollTop = $(window).scrollTop();
        var iScrollPerItem = 200;
        var aItems = oItemsContainer.children('li.item');
        var iCurrentIndex = Math.floor(iScrollTop / iScrollPerItem);
        var fOpacity= (iScrollTop % iScrollPerItem) / iScrollPerItem ;
        aItems.filter(':lt(' + iCurrentIndex  + ')').show();
        aItems.filter(':gt(' + iCurrentIndex  + ')').hide();
        aItems.eq(iCurrentIndex).show();
      });