JSFiddle - React, Tailwind, and code Playground

HTML

<div class="scroll">
<div class="scrolllist">
    <ul>
        <strong>Group 1</strong>
        <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>
        <strong>Group 2</strong>
        <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>
        <strong>Group 3</strong>
        <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 strong.mov {
        top:auto; bottom:0px;
    }
    .scrolllist ul strong {
        position:absolute; height:20px; width:100%; background:#555; color:#FFF; text-indent:20px; top:0;
    }
    .scrolllist ul li {
        display:block; list-style:none; line-height:36px; height:36px; text-indent:20px;
    }

JavaScript

$(document).ready(function(){
    $('.scrolllist').scroll(function(){
    
        $(this).find('ul').each(function(){
            if($(this).position().top <= 0){
                $(this).addClass('abs').find('strong').removeClass('mov');
                
                if($(this).position().top <= ($(this).height() * -1)){
                    $(this).removeClass('abs');
                    $(this).find('strong').addClass('mov');            
                }
                else {
                    $(this).addClass('abs');
                    $(this).find('strong').removeClass('mov');   
                }
                
            }
            else {
                $(this).removeClass('abs').find('strong').removeClass('mov');
            }
            
        });
                            
    });
    
});