JSFiddle - React, Tailwind, and code Playground

HTML

<body style="min-height:2000px;min-width:2000px;">

<div class="fixed">
    <ul>
        <li>Test1</li>
        <li>Test1</li>
        <li>Test1</li>
        <li>Test1</li>
    </ul>
</div>

</body>

CSS

.fixed {
    padding:20px;
    background:#eee;
    position:absolute;
    top:0;
    left:0;
}

JavaScript

//Copied from http://unscriptable.com/2009/03/20/debouncing-javascript-methods/
Function.prototype.debounce = function (threshold, execAsap) {
 
    var func = this, timeout;
 
    return function debounced () {
        var obj = this, args = arguments;
        function delayed () {
            if (!execAsap)
                func.apply(obj, args);
            timeout = null; 
        };
 
        if (timeout)
            clearTimeout(timeout);
        else if (execAsap)
            func.apply(obj, args);
 
        timeout = setTimeout(delayed, threshold || 100); 
    };
 
}

$(document).ready(function() {
   
    $(window).scroll(function() {
    $(".fixed").animate({"top": $(window).scrollTop() + "px"}, 500); 
    }.debounce());
    
});