JSFiddle - React, Tailwind, and code Playground

by ashfame

HTML

<div class='expand'>
    <div class='float'>Menu here</div>
</div>

CSS

div.float {
    background-color: red;
    width: 300px;
}
div.expand { /* simply to allow us to scroll*/
    height: 900px;
    padding: 30px;
}

JavaScript

$(document).ready(function() {
    barTopOffset = $('.float').offset().top;
});
$(window).scroll(function(e) {
    if ($(window).scrollTop() > barTopOffset) {
        $('.float').css({
            position: 'fixed',
            top: '0'
        });
    } else {
        $('.float').css({
            position: 'static'
        });
    }
});