JSFiddle - React, Tailwind, and code Playground

HTML

<div class="scroll">
<div class="scrolllist">
    <ul>
        <li class="strong">Group 1</li>
        <li>Test Element</li>
        <li>Test Element</li>
        <li>Test Element</li>
        <li>Test Element</li>
        <li>Test Element</li>
        <li>Test Element</li>
    </ul>
    <ul>
        <li class="strong">Group 2</li>
        <li>Test Element</li>
        <li>Test Element</li>
        <li>Test Element</li>
        <li>Test Element</li>
        <li>Test Element</li>
        <li>Test Element</li>
    </ul>
    <ul>
        <li class="strong">Group 3</li>
        <li>Test Element</li>
        <li>Test Element</li>
        <li>Test Element</li>
        <li>Test Element</li>
        <li>Test Element</li>
        <li>Test Element</li>
    </ul>
</div>
</div>

CSS

.scroll { 
    position:relative; height:300px; width:300px;
}
.scrolllist {
    height:300px; width:300px; overflow:auto; -webkit-overflow-scrolling:touch;
    }
    .scrolllist ul {
        position:relative; margin:0; padding:0; padding:20px 0 0 0;
    }
    .scrolllist ul.abs {
        position:static !important;
    }
    .scrolllist ul li {
        display:block; list-style:none; line-height:36px; height:36px; text-indent:20px;
    }
    .scrolllist ul .strong {
        position:absolute; height:20px; width:100%; background:#555; color:#FFF; text-indent:20px; top:0; line-height:normal; display:inline;
    }
    .scrolllist ul .mov {
        top:auto; bottom:0px;
    }

JavaScript

$('div.scrolllist').scroll(function(){    
    $(this).find('ul').each(function(){
        //call jquery once only to find this
        var list = $(this);        
        var position = list.position();        
        if(position.top <= 0){        
            //this is not necessary is it?
            //list.addClass('abs').find('strong').removeClass('mov');
            if(position.top <= (list.height() * -1)){
                list.removeClass('abs').find('.strong').addClass('mov');            
            }
            else {
                list.addClass('abs').find('.strong').removeClass('mov');   
            }
        }
        else {
            list.removeClass('abs').find('.strong').removeClass('mov');
        }
    });
});