JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
    <div id="menu">
        &nbsp;
    </div>
</div>
<div id="footer">
    &nbsp;
</div>

CSS

#footer{
    background: #ccc;
    width: 100%;
    height: 550px;
}
#content{
    background: black;
    width: 200px;
    height: 500px;
    margin: 0 auto;
    position: relative;
}
#menu{
    width: 20px;
    height: 50px;
    background: red;
    position: fixed;
}

JavaScript

$(document).ready(function(){
    var bodyHeight = $("body").height();
    var footerHeight = $("#footer").height();
    var menuHeight = $("#menu").height();
    
    $(window).scroll(function() {
        var scrollTop = $("body").scrollTop();
        if((bodyHeight-footerHeight-menuHeight) <= (menuHeight + scrollTop)){
            $("#menu").css("position", "absolute").css("bottom", "0");
        }
        else
        {
            $("#menu").css("position", "fixed").css("bottom", "");
        }
    });
})