JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div id='wrapper'>
    <div id='upper'>This is upper content</div>
    <div id='position-saver'>
        <div id='bar'>This is the menu bar</div>
    </div>
    <div id='lower'>This is some content lower than the menu barThis is some content lower than the menu barThis is some content lower than the menu barThis is some content lower than the menu barThis is some content lower than the menu barThis is some content lower than the menu barThis is some content lower than the menu barThis is some content lower than the menu barThis is some content lower than the menu bar</div>
</div>

CSS

#wrapper {
    width: 100%;
    height: 2000px;
    background-color:#aaa;
}

#upper {
    width: 100%;
    height: 100px;
    background-color: #c00;
}

#position-saver {
    height: 50px;
    width: 100%;
}

#bar {    
    position: static;
    height : 50px;
    width: 100%;
    color: #fff;
    background-color: #000;
}

JavaScript

$(document).ready(function(){
    $(document).on('scroll', function(){
        if ($('#bar')[0].offsetTop < $(document).scrollTop()){
            $("#bar").css({position: "fixed", top:0});            
        }
        if ($(document).scrollTop() < $("#position-saver")[0].offsetTop){
            $("#bar").css({position: "static", top: 0});           
        }            
    });    
});