JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container" style="position:fixed;left:0; top:0;height:300px;overflow:scroll;width:200px;">
    <div class="sector-link">THING<span></span>

    </div>
    <div class="sector-link">THING<span></span>

    </div>
    <div class="sector-link">THING<span></span>

    </div>
    <div class="sector-link">THING<span></span>

    </div>
    <div class="sector-link">THING<span></span>

    </div>
    <div class="sector-link">THING<span></span>

    </div>
    <div class="sector-link">THING<span></span>

    </div>
    <div class="sector-link">THING<span></span>

    </div>
    <div class="sector-link">THING<span></span>

    </div>
    <div class="sector-link">THING<span></span>

    </div>
    <div class="sector-link">THING<span></span>

    </div>
    <div class="sector-link">THING<span></span>

    </div>
    <div class="sector-link">THING<span></span>

    </div>
    <div class="sector-link">THING<span></span>

    </div>
    <div class="sector-link">THING<span></span>

    </div>
    <div class="sector-link">THING<span></span>

    </div>
    <div class="sector-link">THING<span></span>

    </div>
    <div class="sector-link">THING<span></span>

    </div>
    <div class="sector-link">THING<span></span>

    </div>
    <div class="sector-link">THING<span></span>

    </div>
    <div class="sector-link">THING<span></span>

    </div>
    <div class="sector-link">THING<span></span>

    </div>
</div>

CSS

body {
    height:100000px;
}
.sector-link {
}

JavaScript

$(document).ready(function () {
    $('.sector-pink').css({
        opacity: 0,
        visibility: 'visible'
    });

    var setOpacity = function () {
        var container = $(this);

        $('.sector-link').each(function () {
            var self = $(this);
            var fromBottom = container.height() - self.offset().top;


            var opacity = fromBottom / 100;
            
            self.find('span').text(opacity.toFixed(2));
            self.css({
                'opacity': opacity
            });
        });
    };
    $('#container').scroll(function () {
        setOpacity();
    });
    setOpacity();
});