JSFiddle - React, Tailwind, and code Playground

by Thiago Przybylovicz

HTML

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

CSS

body{
    color: white;
}

.header {
    display: block;
    background-color: red;
    height: 120px;
}

.filter-wrapper {
    position: relative;
    display: block;
}

.floating-filter.stivky {
    position:absolute; 
    z-index: 9999;
}

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

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

JavaScript

$(document).ready(function () {
    var height = $('.floating-filter').outerHeight(true);
    $('.filter-wrapper').attr('style', 'height: ' + height + 'px');
});

$(window).scroll(function() {
    var windowScrollTop = $(this).scrollTop();
    if (windowScrollTop > $('.filter-wrapper').offset().top) {
        $('.floating-filter').addClass('sticky');
        $('.floating-filter').attr('style', 'position:absolute; top: ' + (windowScrollTop - $('.filter-wrapper').offset().top) + 'px');
    } else {
        $('.floating-filter').removeClass('sticky');
        $('.floating-filter').removeAttr('style');
    }
});