JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="header"></div>
    <div id="content">
        <div id="sidebar"></div>
    </div>
    <div id="footer"></div>
</div>

CSS

body { 
    margin:0 
}
#header {
    background:red;
    height:500px;
}
#container{
    height:1500px;
}
#content{
    background:#DDD;
    height:1000px;
    position:relative;
}
#sidebar{
    background:yellow;
    height:320px;
    margin:20px;
    width:150px;
    float:right;
}
#footer {
    background:blue;
    height:200px;
}
.fixed{
    position:fixed;
    top:0;
    right:0;
}

.bottom{
    top:auto;
    bottom:0;
    position:absolute;
}

JavaScript

$(window).scroll(function () {
    var threshold = 50;
    
    if ($(window).scrollTop() >= threshold)
        $('#sidebar').addClass('fixed');
    else
        $('#sidebar').removeClass('fixed');
    var check = $("#content").height() - $("#sidebar").height();
    if ($(window).scrollTop() >= check)
        $('#sidebar').addClass('bottom');
    else
        $('#sidebar').removeClass('bottom');
});