Attach and detach affixed headers with Twitter Bootstrap

Question

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.

I'm using the script from this jsfiddle.

What I'm trying right now is this:

$('#nav-wrapper').height($("#nav").height());

$('#nav').affix({
    offset: $('#nav').position()
});
$('#nav').detached({
    offset: $('#bottom').position()
});

With the .detached class like so:

.detached { position: static; }

Can't get this to work. Any suggestions?

Answer 1

Twitter Bootstrap affix module doesn't have that option. But, I've used many times hcSticky, it is awesome. Take a look, it's simply to use and works very well.