JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="header">
        Header
    </div>
    <div id="content">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <div id="footerContainer">
        <div id="footer">
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
            Tall Footer<br/>
        </div>
    </div>
</div>

CSS

.stuck {
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    width: 180px;
    overflow-y: auto;
    background-color: #eee;
}
.not-stuck {
    margin-left: 200px;
}

JavaScript

$(document).ready(function(){
    $(window).bind("scroll resize", function(){
        var scrollTop = $(window).scrollTop();
        var headerTop = $("#header").offset().top;
        
        if (scrollTop >= headerTop && scrollTop !== 0){
            $("#header").addClass("stuck");
        } else {
            $("#header").removeClass("stuck");            
        }            
    });
});