JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<header>
<h1>"The sticking sidebar"</h1>
</header>
<div id="content"><p>START<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a tellus tincidunt, lacinia ex facilisis, facilisis ipsum. Pellentesque ac accumsan mi. Vestibulum iaculis luctus ultricies. Integer aliquet, felis id facilisis consectetur, tortor ligula eleifend urna, convallis facilisis erat erat nec libero. Pellentesque finibus sed leo vel tincidunt. Praesent in est erat. Donec nec varius leo. Nam convallis feugiat velit at commodo. Mauris feugiat lorem eros, a varius sem gravida eu. Ut convallis, velit hendrerit semper laoreet, libero nunc egestas neque, et ultrices ex elit et lacus.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a tellus tincidunt, lacinia ex facilisis, facilisis ipsum. Pellentesque ac accumsan mi. Vestibulum iaculis luctus ultricies. Integer aliquet, felis id facilisis consectetur, tortor ligula eleifend urna, convallis facilisis erat erat nec libero. Pellentesque finibus sed leo vel tincidunt. Praesent in est erat. Donec nec varius leo. Nam convallis feugiat velit at commodo. Mauris feugiat lorem eros, a varius sem gravida eu. Ut convallis, velit hendrerit semper laoreet, libero nunc egestas neque, et ultrices ex elit et lacus.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a tellus tincidunt, lacinia ex facilisis, facilisis ipsum. Pellentesque ac accumsan mi. Vestibulum iaculis luctus ultricies. Integer aliquet, felis id facilisis consectetur, tortor ligula eleifend urna, convallis facilisis erat erat nec libero. Pellentesque finibus sed leo vel tincidunt. Praesent in est erat. Donec nec varius leo. Nam convallis feugiat velit at commodo. Mauris feugiat lorem eros, a varius sem gravida eu. Ut convallis, velit hendrerit semper laoreet, libero nunc egestas neque, et ultrices ex elit et lacus.</p><p>Lorem ipsum dolor sit amet,...

CSS

header h1{
  text-align: center;
}
#content{
  float: left;
  width: 70%;
  background-color: rgb(150, 150, 0)
}
#sidebar{
  position: relative;
  width: 30%;
  float: right;
  background-color: yellow;
}

JavaScript

$(document).ready(function(){
	// define variables before scrollin to destress the processor
  let contentHeight = $("#content").height();
  let sidebarHeight = $("#sidebar").height();
  let scrollTop = 0;
  let windowHeight = $(window).height();
  let doc = $(document); 
  let contentOffset = $("#content").offset().top;
  
  $(window).resize(function(){
  	//should reset all variables here or the code will bug out on screen resizing 
  contentHeight = $("#content").height();;
  sidebarHeight = $("#sidebar").height();
  windowHeight = $(window).height();
  contentOffset = $("#content").offset().top;
  determineSidebarScrollBehavior(doc, contentHeight, contentOffset, sidebarHeight,windowHeight);
  });
  $(document).scroll(function(){
			determineSidebarScrollBehavior(doc, contentHeight, contentOffset, sidebarHeight, windowHeight);
  }); // end scroll
});//end ready

function determineSidebarScrollBehavior(doc, contentHeight, contentOffset, sidebarHeight, windowHeight){ 
	//only run if the #sidebar is higher than the #content
  if(contentHeight>sidebarHeight){
  	var scrollTop = doc.scrollTop();
    //check if variable has been previously created by this function else the value is 0
    let oldScrollTop = (window.oldScrollTop)?window.oldScrollTop:0;
    //create a marginTop var if it doesn t exist yet
    window.marginTop = (window.marginTop)?marginTop:0;
    //determine if you scroll up op down
    let isScrollingDown = (scrollTop>oldScrollTop)?true:false;
    //if the end of the sidebar reaches the end of the window change margin so it "sticks". It should stick until the #sidebar reaches the same height (inculding margin) as the #content.
    if(isScrollingDown && scrollTop+windowHeight > contentOffset + sidebarHeight + marginTop){
    marginTop = scrollTop + windowHeight-sidebarHeight-contentOffset;
    // check if content would be too long, if so set the maximum marginTop
   	if(marginTop>contentHeight-sidebarHeight){
      	marginTop =...