JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://mrgray.com/global/css/bootstrap.css">
<div class="topbar"><div class="topbar-inner">
<div class="container-fluid"> <!-- this is the key -->
<a class="brand" href="#">Vote for my answer!</a>
<ul class="nav">
    <li class="active"><a href="#">Stay Sexy</a></li>
    <li id="hider"><a class="label success" href="#">Play Hide=A-Bar</a></li>
    <li><a href="#about">Thanks Gorgeous</a></li>
</ul></div></div></div>
<div class="container-fluid">
      <div class="sidebar">
        <div class="well">
          <h5>Sidebar</h5>
          <ul><li><a href="#">Link</a></li><li><a href="#">Link</a></li><li><a href="#">Link</a></li><li><a href="#">Link</a></li></ul>
          <h5>Sidebar</h5>
          <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>
          <h5>Sidebar</h5>
          <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>
        </div>
      </div>
<div class="content">
    <div class="hero-unit withbar">
    <h1>That's Hot!</h1>
    <p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
    <p><a class="btn primary large">Loves it.&raquo;</a></p>
    </div>
        <!-- Example row of columns -->
        <div class="row">
          <div class="span6">
            <h2>Heading</h2>
            <p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
  ...

CSS

.withbar { padding-top: 60px; }
.content { text-align: left;}
.bargone { padding-top: 23px;}

JavaScript

function onInactive(ms, cb) {
    var wait = setTimeout(cb, ms);
    document.onmousemove = document.mousedown =
    document.mouseup = document.onkeydown =
    document.onkeyup = document.focus =
    function() {
        clearTimeout(wait);
        wait = setTimeout(cb, ms);
}; }
var sidebar = $('div.sidebar');
var content = $('div.content');
$('body').live('mousemove', function(event) {
    sidebar.addClass('sidebar').fadeIn();
    content.addClass('content').removeClass('container-fluid');
});
onInactive(1000, function() {
    sidebar.fadeOut(300);
    content.removeClass('content').addClass('container-fluid');
});
$('#hider').live('click', function() {
    $('.topbar').fadeOut();
    $('body').switchClass('withbar','bargone', 1000);
});
sidebar.live('hover', function() {
    $('body').removeClass('bargone').addClass('withbar');
    $('.topbar').fadeIn("slow");
});