JSFiddle - React, Tailwind, and code Playground

by Mohamed Amer

HTML

<body>
    <div class="floating-filter">
        That's the menu
    </div>
    <div class="content">
        blah blah blah
    </div>
</body>

CSS

body{
    color: white;
}

.floating-filter.fixed {
    position:fixed; 
    top:1px; 
    z-index: 9999;
}

.floating-filter {
    background-color: green;
    width: 100%;
    height: 160px;
}

.content{
    display: block;
    width: 100%;
    height: 550px;
    background-color: blue;
}

JavaScript

$(window).scroll(function () {
    if ($(window).scrollTop() > $('.content').offset().top) {
        $('.floating-filter').addClass('fixed');
    } else {
        $('.floating-filter').removeClass('fixed');
    }
});