JSFiddle - React, Tailwind, and code Playground

HTML

<p class="info">Not visible</p>
<div id="scroll-wrap" style="overflow:scroll;width:100%; border:0; height:300px; ">
    <div style="height:3000px; position:relative;">
        <div style="position:fixed;left:0; top:50px;">
            <div style="position:fixed;left:0; top:50px;">
                <div class="sector-link" data-scroll-point="100">Link 1</div>
                <div class="sector-link" data-scroll-point="300">Link 2</div>
                <div class="sector-link" data-scroll-point="500">Link 3</div>
                <div class="sector-link" data-scroll-point="700">Link 4</div>
                <div class="sector-link" data-scroll-point="1000">Link 5</div>
                <div class="sector-link" data-scroll-point="1200">Link 6</div>
                <div class="sector-link" data-scroll-point="2000">Link 7</div>
                <div class="sector-link" data-scroll-point="2500">Link 8</div>
            </div>
        </div>
    </div>
</div>

CSS

body {
    height: 3000px;
}
p.info {
    position: fixed;
    top: 0;
    font-size: 11px;
    color: #555;
    background: #eee;
    padding: 3px;
}
.sector-link {
    float: left;
    margin: 5px;
    padding: 5px;
    border-radius: 2px;
    background: #abcdef;
    display: none;
}

JavaScript

var lastScroll  = 0;
var arr = [];
$('.sector-link').each(function (i) {
    arr.push($(this).data("scroll-point"));
});

$('#scroll-wrap').scroll(function () {
    var scrollTop = $('#scroll-wrap').scrollTop();
    if(scrollTop > lastScroll )
    {
        elementFadeIn(scrollTop);
    }
    else {
        elementFadeOut(scrollTop);
    }
     lastScroll = scrollTop;

});

elementFadeIn = function (top) {
    for (var i = 0; i < arr.length; i++) {
        var min = arr[i];
        var max = i != (arr.length - 1) ? arr[i + 1] : (arr[i] + 100);
        if (top >= min && top < max) {
           console.log();
            $('[data-scroll-point="' + arr[i] + '"]').fadeIn(800);
            $('p.info').html($('[data-scroll-point="' + arr[i] + '"]').html() + " visible at point " + arr[i]);
        }
    }
}

elementFadeOut = function (top) {
    for (var i = 0; i < arr.length; i++) {
        var min = arr[i];
        var max = i != (arr.length - 1) ? arr[i + 1] : (arr[i] + 100);
        if (top >= min && top <max) {
    
            var elem = arr[i+1];

            if(top==100) {
                elem = arr[i]
            }
            $('p.info').html($('[data-scroll-point="' + elem + '"]').html() + " hidden at point " + elem);
             $('[data-scroll-point="' + elem + '"]').fadeOut(800);
        }
    }
}