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

.sector-link {
    display:none;
}

JavaScript

// Constants
var pxPerItem = 720;
var sectorLinks = $('.sector-link');
var scrollYMax = sectorLinks.length * pxPerItem;

//Fade controller variable
var currentScrollY = 0;


//Calculates fade value for the item based on current 'scroll' position
function calculateFade(itemNo) {
    var relativeScroll = (currentScrollY - pxPerItem * itemNo) / pxPerItem;
    return Math.min(Math.max(0, relativeScroll), 1)
}

//Keeps the controller scroll variable within the bounds based on the amount of elements. 
function normalizeCurrentScroll() {
    currentScrollY = Math.min(Math.max(0, currentScrollY), scrollYMax);
}

//The actual event that controls items fade
$(window).bind('mousewheel DOMMouseScroll', function(event){
    var delta = event.originalEvent.wheelDelta == 0 ? event.originalEvent.detail : event.originalEvent.wheelDelta;
    currentScrollY -= delta;
    for (var i = 0; i < sectorLinks.length; i++) {
        $(sectorLinks[i]).fadeTo(20, calculateFade(i));
    }    
    normalizeCurrentScroll();
});