title: Attach and detach affixed headers with Twitter Bootstrap
body: <p>I'm trying to use the affix function to attach a header to the top of the screen, but have it attached only for a portion of the page. It should detach (and scroll up along with the content) when the user scrolls past a certain point.</p>
  
  <p>I'm using the script from this <a href="http://jsfiddle.net/Uaa3U/198/" rel="nofollow">jsfiddle</a>.</p>
  
  <p>What I'm trying right now is this:</p>
  
  <pre><code>$('#nav-wrapper').height($("#nav").height());
  
  $('#nav').affix({
      offset: $('#nav').position()
  });
  $('#nav').detached({
      offset: $('#bottom').position()
  });
  </code></pre>
  
  <p>With the <code>.detached</code> class like so:</p>
  
  <pre class="lang-css prettyprint-override"><code>.detached { position: static; }
  </code></pre>
  
  <p>Can't get this to work. Any suggestions?</p>