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');
$('#items li:gt(0)').hide();
$(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();
});