JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sidebar">
    <div class="fixed">FIXED ELEMENT</div>
</div>

<div id="header">THAT'S YOUR HEADER</div>

<div id="stuff">
    
</div>

<div id="footer">
    THAT'S YOUR FOOTER
</div>

CSS

#sidebar>div{ width: 100px;height: 300px; margin-top: 10px; background-color: blue; position:fixed; left: 0; top: 172px;}

#stuff{
    height: 1000px;
    width: 300px;
   background-image: url("http://placekitten.com/100/100")   
}

#footer, #header{
     height: 100px;
  width: 300px;
   background-color: yellow; 
}

JavaScript

$(function() {
    $.fn.scrollBottom = function() {
        return $(document).height() - this.scrollTop() - this.height();
    };

    var $el = $('#sidebar>div');
    var $window = $(window);

    $window.bind("scroll resize", function() {
        var gap = $window.height() - $el.height() - 10;
        var visibleFoot = 172 - $window.scrollBottom();
        var scrollTop = $window.scrollTop()
        
        if(scrollTop < 172 + 10){
            $el.css({
                top: (172 - scrollTop) + "px",
                bottom: "auto"
            });
        }else if (visibleFoot > gap) {
            $el.css({
                top: "auto",
                bottom: visibleFoot + "px"
            });
        } else {
            $el.css({
                top: 0,
                bottom: "auto"
            });
        }
    });
});