JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

#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 > stickToBot) {
           menu.css({top: '0px', position: 'fixed'});
         }
         else {
           menu.css({top: stickToBot + 'px', position: 'absolute'});
         }
       });
     });