JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
        <div id="header"></div>
        <div id="menu"></div>
        <div id="content"></div>
    </body>
</html>

CSS

#header{
    height: 50px;
    background: #167193;
    margin-bottom: 2px;
}
#menu{
    height: 40px;
    width: 100%;
    background: #333333;
}
p{
    padding: 0.5em;
}

JavaScript

$('#content').append(new Array(80).join('<p>Lorem ipsum dolor sit amet</p>'));

var menu_offset = $('#menu').offset().top;
$(window).scroll(function(e){
    var menu = $('#menu');
    if(window.pageYOffset - menu_offset >= 0){
        menu.css({'position' : 'fixed', 'top': '0'});
    }
    else{
        menu.css('position', 'static');
    }
});