JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="content">Content</div>
    <div class="sidebar">
    
        <div class="sidebar1">
            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="sidebar2">
            Sidebar content not sticky
        </div>
    </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; height: 3000px; position: relative;}

.sidebar1  { width:100px; height:800px; background:#ddd; padding:20px; float:left; margin:0 0 20px 0;}
.sidebar2 { width:100px; height:200px; background:#eee; padding:20px; float:left; bottom: 0; position:absolute;}

.fixed {
    position: fixed;
    left: 50%;
    margin-left:50px;
}

.bottom {
    bottom: 0;
    position: fixed;
    left: 50%;
    margin-left:50px;
}

.fixedBottom {
    position: absolute;
    bottom: 240px;
}

JavaScript

jQuery(document).ready(function() {

		var tmpWindow = $(window),
            sidebar = $('.sidebar'),
            content = $('.content'),
            sidebar1 = $('.sidebar1'),
            sidebar2 = $('.sidebar2'),
            viewportHeight = $(window).height(),
            sidebarHeight = sidebar.height(),
            sidebar1Height = sidebar1.height(),
            sidebar2Height = sidebar2.height(),
            offsetBottom;
            
    
		tmpWindow.scroll(function(){
            
            offsetBottom = content.height() - sidebar2Height;

            if (viewportHeight > sidebarHeight) {
                sidebar.addClass('fixed');
            } 
            
            if ((tmpWindow.scrollTop() + viewportHeight) > sidebar1Height ) {
                sidebar1.addClass('bottom');
            } else {
                sidebar1.removeClass('bottom');
            }
            
            if ((tmpWindow.scrollTop() + viewportHeight) > offsetBottom) {
                sidebar1.removeClass('bottom');
                sidebar1.addClass('fixedBottom');
            } else {
                sidebar1.removeClass('fixedBottom');
            }
            
        });
            
});