JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
 Test
</div>
<div class="menu">
    <div id="side">
        <ul>
            <li>Item1</li>
            <li>Item2</li>
            <li>Item3</li>
        </ul>
    </div>
</div>
<footer>footer</footer>

CSS

.menu {
    right: 0;
    position: absolute;
    top: 243px;
    width: 250px;
    z-index: 5;
}

#side {
    background: #ace;
    position:fixed;
    width: 250px;
}
.test {height:1000px;}
footer {height:500px;}

JavaScript

var height = $("#side").height();

$(window).scroll(function(){
        $("#side").css("top",Math.max(15,243-$(this).scrollTop()));
                        
       if( ($("#side").offset().top+height) >= $('footer').offset().top ){
					$("#side").hide();       
       } 
       
       if( ($(this).scrollTop()+height) < ($('footer').offset().top) ){
					$("#side").show();       
       }
       
    });