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; padding:20px; float:left; }

.sidebar { width:100px; float:left; margin-left:20px; }

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

JavaScript

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

var $sidebar   = $('.sidebar'),
    $content   = $('.content');

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

    $window.scroll(function() {
        clearTimeout(timer);
        timer = setTimeout(function() {
            if ($content.height() > $sidebar.height()) {
                var new_margin = $window.scrollTop() - offset.top;
                if ($window.scrollTop() > offset.top && ($sidebar.height()+new_margin) <= $content.height()) {
                    // Following the scroll...
                    $sidebar.stop().animate({ marginTop: new_margin });
                } else if (($sidebar.height()+new_margin) > $content.height()) {
                    // Reached the bottom...
                    $sidebar.stop().animate({ marginTop: $content.height()-$sidebar.height() });
                } else if ($window.scrollTop() <= offset.top) {
                    // Initial position...
                    $sidebar.stop().animate({ marginTop: 0 });
                }
            }
        }, 100); 
    });
}

});