JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="rightPanelscrl">
            <li><a href="#">one</a></li>
            <li><a href="#">two</a></li>
            <li><a href="#">three</a></li>
            <li><a href="#">four</a></li>
            <li><a href="#">five</a></li>
        </ul>

CSS

body {height: 2000px;}
    
    #rightPanelscrl {
        position:absolute; 
        top:240px; 
        z-index:4; 
        width:100%;  
    }
    
    #rightPanelscrl.fixed {
        position:fixed; 
        top:0px;
    }

JavaScript

$(document).ready(function() {
        var theLoc = $('#rightPanelscrl').position().top;
        $(window).scroll(function() {
            if(theLoc >= ($(window).scrollTop()) - 0)  {
                if($('#rightPanelscrl').hasClass('fixed')) {
                    $('#rightPanelscrl').removeClass('fixed');
                }
            } else { 
                if(!$('#rightPanelscrl').hasClass('fixed')) {
                    $('#rightPanelscrl').addClass('fixed');
                }
            }
        });
    });