JSFiddle - React, Tailwind, and code Playground

HTML

<div class='sidebar'>
</div>

CSS

body {
    height: 1200px;
}

.sidebar {
    float: left;
    height: 600px;
    width: 200px;
    background-color: #a0a0a0;
}

.top-aligned {
    position: fixed;
    top: 10px;
}

JavaScript

var scrollPos;
$(window).scroll(function(event){
    var pos = $(this).scrollTop();
    if ( pos < scrollPos){
        $('.sidebar').addClass('top-aligned');
    } else {
        $('.sidebar').removeClass('top-aligned');
    }
    
    scrollPos = pos;
});