JSFiddle - React, Tailwind, and code Playground

by Ian Gray

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<header id="banner" class="navbar" role="banner">
  <img src="http://lorempixel.com/460/215/" class="main-logo" />

  <div id="topPlaceholder">
  <div id="navbar-placeholder">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
        <a class="brand" href="/">
        Brand      </a>
      <nav id="nav-main" class="nav-collapse" role="navigation">
        <ul id="menu-primary-navigation" class="nav"><li class="menu-home"><a href="/">Home</a></li>
<li class="menu-about"><a href="/about/">About</a></li>            
<li class="menu-tech"><a href="/tech/">Tech</a></li>
<li class="active menu-articles"><a href="/articles/">Articles</a></li>
<li class="menu-contact"><a href="/contact/">Contact</a></li>
</ul>      </nav>
    </div>
    </div>
    </div>
  </div>
</header>
  <div id="wrap" class="container-fluid" role="document">
    <div id="content" class="row-fluid">
          <aside id="sidebar" class="span3">
         <div id="sidebarPlaceholder">
              <div id="sidebar-placeholder">
                <ul class="unstyled" id="topArticles">
                    <li><a href="/"><img width="100" height="70" src="http://lorempixel.com/100/70/"  alt="Article"> This is an article</a></li>
                    <li><a href="/"><img width="100" height="70" src="http://lorempixel.com/100/70/"  alt="Article"> This is an article</a></li>
                    <li><a href="/"><img width="100" height="70" src="http://lorempixel.com/100/70/"  alt="Article"> This is the  article</a></li>
                    <li><a href="/"><img width="100" height="70"...

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