JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">MENU</div>
<div id="content"> CONTENT </div>

CSS

#menu {
    width: 100%;
    height: 40px;
    background: #3e3e3e;
    font-size: 15px;
    line-height: 40px;
    text-align: center;
    color: #ffffff;
    position: fixed;
}

#content {
    height: 2500px;
    padding-top: 200px;
    text-align: center;
    color: #3e3e3e;
    border: 1px solid #3e3e3e;
}

JavaScript

$(document).ready(function() {
       var menu = $('#menu');
       var windowH = $(window).height();
       var stickToBot = windowH - menu.outerHeight(true);
       menu.css('top', stickToBot + 'px');
        
        $(window).scroll(function() {
           var scrollVal = $(this).scrollTop();
           if ( scrollVal > 0 ) {
                menu.stop().animate({top :'0px'});
            } else {
                menu.stop().animate({top: stickToBot + 'px'});
            }
        });
     });