JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="http://getbootstrap.com/assets/css/docs.min.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<header class="navbar navbar-fixed-top navbar-default" id="top" role="banner">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="index.html" class="navbar-brand" alt="assemble">ASSEMBLE</a>
    </div>
    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
      <ul class="nav navbar-nav">
        <li class="active">
          <a href="helpers.html">Helpers</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li active="">
          <a href="about.html">About</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"> GitHub <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li> <a href="">Docs repo</a> 
            </li>
            <li> <a href="">Docs issues</a> 
            </li>
            <li class="divider"></li>
            <li> <a href="">Assemble repo</a> 
            </li>
            <li> <a href="">Assemble issues</a> 
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</header>
<div class="container bs-docs-container">
  <div class="row">
    <div class="col-md-3">
      <div class="sidebar hidden-print affix" role="complementary">
        <div id="navigation">
          <!-- navigation -->
          <ul class="nav sidenav">
            <li class="active"><a href="#collections">Collections</a>
              <ul class="nav">
               ...

CSS

.navarea-fixed {
    position: fixed;
    left:0;
    top:0;
    width:100%;
    z-index:9099;
    background-color:#fff;
    border-bottom:#fff 5px solid;
}
#topArticles a {
    display:block;
    height:80px;
    padding:10px 0px 5px 0px;
    border-bottom:#dedede 1px solid;
}
#topArticles li {
    clear:left;
}
#topArticles img {
    float:left;
    margin:0px 10px 10px 0px;
}
#sidebar a:link, #sidebar a:visited {
    color:#666;
    text-decoration:none;
}
#sidebar a:hover, #sidebar a:active {
    color:#000;
    background-color:#ededed;
    text-decoration:none;
}
.sidebar-fixed {
    position:fixed;
    top:50px;
    width: 23.076923076923077%;
    height: 93%;
    overflow: auto;
    padding-bottom:-50px;
}

JavaScript

$(function () {


     // Get a reference to the placeholder. This element
     // will take up visual space when the message is
     // moved into a fixed position.
     var placeholder = $("#topPlaceholder");
     var sidebarplaceholder = $("#sidebarPlaceholder");

     // Get a reference to the top area whose position
     // we want to "fix" on window-scroll.
     var topArea = $("#navbar-placeholder");
     var sidebarArea = $("#sidebar-placeholder");
     var mainArea = $("#main");

     // Get a reference to the window object; we will use
     // this several time, so cache the jQuery wrapper.
     var view = $(window);

     // Bind to the window scroll and resize events.
     // Remember, resizing can also change the scroll
     // of the page.
     view.bind(
         "scroll resize",

     function () {
         // Get the current offset of the placeholder.
         // Since the message might be in fixed
         // position, it is the plcaeholder that will
         // give us reliable offsets.
         var placeholderTop = placeholder.offset().top;

         // Get the current scroll of the window.
         var viewTop = view.scrollTop();

         // Check to see if the view had scroll down
         // past the top of the placeholder AND that
         // the message is not yet fixed.
         if (
         (viewTop > placeholderTop) && !topArea.is(".navarea-fixed")) {

             // The message needs to be fixed. Before
             // we change its positon, we need to re-
             // adjust the placeholder height to keep
             // the same space as the message.
             //
             // NOTE: All we're doing here is going
             // from auto height to explicit height.
             placeholder.height(
             placeholder.height());

             // Make the message fixed.
             topArea.addClass("navarea-fixed");
             sidebarArea.addClass("sidebar-fixed");
             mainArea.addClass("mainArea");
        ...