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;
    bottom: 0px;
}

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

JavaScript

$(document).ready(function() {
       $(window).scroll(function() {
           var scrollVal = $(this).scrollTop();
            if ( scrollVal > 0 ) {
                $('#menu').css({bottom: '', top :'0px'});
            } else {
                $('#menu').css({top: '', bottom: '0px'});
            }
        });
     });