JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      Header and Menu is placed here. Header and Menu is placed here. Header and Menu is placed here. Header and Menu is placed here. Header and Menu is placed here. Header and Menu is placed here. 
      <hr />
    </div>
    <div class="col-xs-8">
       <p>This is the main body which the user would be scrolling infinitely as more data gets loaded on scroll. This is the main body which the user would be scrolling infinitely as more data gets loaded on scroll. This is the main body which the user would be scrolling infinitely as more data gets loaded on scroll. This is the main body which the user would be scrolling infinitely as more data gets loaded on scroll. This is the main body which the user would be scrolling infinitely as more data gets loaded on scroll. This is the main body which the user would be scrolling infinitely as more data gets loaded on scroll. This is the main body which the user would be scrolling infinitely as more data gets loaded on scroll. This is the main body which the user would be scrolling infinitely as more data gets loaded on scroll. This is the main body which the user would be scrolling infinitely as more data gets loaded on scroll. This is the main body which the user would be scrolling infinitely as more data gets loaded on scroll. This is the main body which the user would be scrolling infinitely as more data gets loaded on scroll. This is the main body which the user would be scrolling infinitely as more data gets loaded on scroll. This is the main body which the user would be scrolling infinitely as more data gets loaded on scroll. This is the main body which the user would be scrolling infinitely as more data gets loaded on scroll. This is the main body which the user would be scrolling infinitely as more data gets loaded on scroll. This is the main...

CSS

#sidebar {
  background-color: #eee;
  padding: 10px;
}

JavaScript

function scrollCheck() {
    var $right = $('#sidebar'),
        scrollTop = $(window).scrollTop(),
        windowHeight = $(window).height(),
        docHeight = $(document).height(),
        rightHeight = $right.height(),
        distanceToTop = rightHeight - windowHeight,
        distanceToBottom = scrollTop + windowHeight - docHeight;
    if (scrollTop > distanceToTop) {
        
        $right.css({
            'position': 'fixed',
            'bottom': (scrollTop + windowHeight > docHeight ? distanceToBottom  + 'px' : '0px')
        });
    }
    else {
        $right.css({
            'position': 'relative',
            'bottom': 'auto'
        });
    }
}

$(window).bind('scroll', scrollCheck);