JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <ul>
        
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            
        </ul>
    <div id="right_side_bar">
        
        <ul>
            <li>purr</li>
            <li>purr</li>
            <li>purr</li>
            <li>purr</li>
            <li>purr</li>
            <li>purr</li>
            <li>purr</li>
            <li>purr</li>
            <li>purr</li>
            <li>purr</li>
            <li>purr</li>
            <li>purr</li>
            <li>purr</li>
            <li>purr</li>
            <li>purr</li>
            <li>purr</li>
            <li>purr</li>
            <li>purr</li>
            <li>purr</li>
            <li>purr</li>
            <li>purr</li>
            <li>purr</li>
            <li>purr</li>
            <li>purr</li>
            <li>purr</li>
            <li>purr</li>
          <li>purr</li>
            
        </ul>
    </div>
    <ul>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
            <li>meow</li>
           ...

CSS

#container {height:100%; overflow-x:hidden; overflow-y:scroll; position: absolute; width: 100%; background: #CCC; }
#right_side_bar {position: absolute;width:200px; height: 300px; background: #FF0000; overflow-x: hidden; overflow-y: hidden; margin:0px;z-index: 9999; top: 250px; right: 0px; }

JavaScript

$("#container").scroll(function(){
  $("#right_side_bar").scrollTop($("#container").scrollTop());
});

$('#right_side_bar').bind('scroll', function() {
 if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
     $(this).css({position:'fixed', top: '60px'})
 }
         else
         {
         $(this).css({position:'absolute', top: '250px'})
         }
});