JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">Content</div>
<div class="sidebar">
    
    <div class="sidebar_content_sticky">
        Sidebar content
        <br />
        <br />
        Once reached bottom of this div start sticky
    </div>
    <!--Stop sticky here-->
    
    <!--Only show this when scrolled bottom of page-->
    <div class="sidebar_content_not_sticky">
        Sidebar content not sticky
    </div>
</div>

CSS

body { padding:40px; }

.content { width:300px; height:3000px; background:#ccc; margin-bottom: 50px; float:left; }

.sidebar { width:100px; float:left; margin-left:20px; }
.sidebar.fixed{position: fixed;top: 0px; right: 205px; height: 100%; overflow: auto;}

.sidebar_content_sticky  { width:100px; height:800px; background:#ddd; float:left; margin:0 0 20px 0;}
.sidebar_content_not_sticky { width:100px; height:200px; background:#ddd; float:left; margin:0 0 20px 0;}

JavaScript

jQuery(document).ready(function($) {

var $sidebar   = $('.sidebar'),
    $content   = $('.content');
   
//Since our CSS is going to monkey with the height as you scroll, I need to know the initial height.
var sidebarHeight = $sidebar.height();

if ($sidebar.length > 0 && $content.length > 0) {
    var $window    = $(window),
        offset     = $sidebar.offset(),
        timer;
    
    $window.scroll(function() {

        if ($content.height() > sidebarHeight) {
            var new_margin = $window.scrollTop() - offset.top;
            if ($window.scrollTop() > offset.top) {
                // Fix sidebar
                $sidebar.addClass("fixed");
                // Scroll it the appropriate ammount
                $sidebar.scrollTop(new_margin);            
            }else{
                $sidebar.removeClass("fixed");
            }
        }
    });
}

});