JSFiddle - React, Tailwind, and code Playground

by dibdab

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...

CSS

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

.docked-sidebar {
  position: fixed;
  top: 0;
}

JavaScript

var $right = $('#sidebar'),
  isDocked = false,
  initOffsetTop = $right.offset().top;


function scrollCheck() {
  var scrollTop = $(window).scrollTop(),
    offsetTop = $right.offset().top;

  if (!isDocked && ((offsetTop - scrollTop) < 0)) {
    $right.toggleClass("docked-sidebar");
    isDocked = true;
  } else if (isDocked && scrollTop <= initOffsetTop) {
    debugger;
    $right.toggleClass("docked-sidebar");
    isDocked = false;
  }
}

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