JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <span id="menu" style="">hold this</span>
</div>

CSS

#wrapper { height:3000px; position:relative; float:left; }
#menu{background-color:#000; height:20px; color:#fff; padding:2px; width:1000px; float:left; position:relative; top:660px; 
float:left;}

JavaScript

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