JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<div class="topbar">
<p>
A simple topbar
</p>
</div>
<div class="container">
<div class="left">
<p>
Start fixed element
</p>
</div>
<div class="right">
<div class="sidebar">
<ul>
<li>Menu item 1</li>
<li>Menu item 1</li>
</ul>
</div>
</div>
<div class="bottom">
<p>
Remove fixed element
</p>
</div>
</div>
<div class="footer">
<p>
A simple footer
</p>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}
.fixed {
  position: fixed;
  width: inherit;
  overflow: hidden;
  background: red;
  top: 0;
}
.topbar {
  background: red;
  height: 85px;
  text-align: center;
  line-height: 85px;
  color: #fff;
}
.container {
  width: 100%;
  overflow: hidden;
}
.left {
  float: left;
  width: 75%;
  background: gray;
  height: 800px;
}
.right {
  float: left;
  width: 25%;
  background: black;
  color: #fff;
}
.bottom {
  width: 100%;
  background: blue;
  overflow: hidden;
  height: 200px;
  line-height: 200px;
  color: #fff;
  text-align: center;
}
.footer {
  height: 600px;
  color: #000;
  text-align: center;
}

JavaScript

var sidebar = $('.sidebar').offset().top;

// If you reached the blue div (bottom), remove the 'fixed' class. Because the fixed element may not scroll over the footer or blue div. If you scroll back to the top (before the blue div or between the sidebar and the blue div) the fixed class need to be added again.
$(window).scroll(function() {  
  if ($(window).scrollTop() > sidebar) {
    $('.sidebar').addClass('fixed');
  }else{
    $('.sidebar').removeClass('fixed');
  }
});