Attach and Detach Attached Headers Using Twitter Bootstrap

Question

I'm trying to use the affix function to attach a heading to the top of the screen, but snap it to only part of the page. It should disconnect (and scroll up along with the content) when the user scrolls past a specific point.

I am using the script from this jsfiddle .

What I'm trying to do now is this:

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

With the .detached class:

 .detached { position: static; } 

Can't make it work. Any suggestions?

Answer 1

Twitter Bootstrap assembler module does not have this option. But I used hcSticky many times, it's awesome. Take a look, this is easy to use and works very well.

Answer 2

You can write logic in a function and pass its affix as offset.top.

Try

 var navHeight = $("#nav").height(); var detachTop = $("#detach").offset().top; var navTop = $("#nav-wrapper").offset().top; $('#nav-wrapper').height(navHeight); $('#nav').affix({ offset : { top : function() { if ((navHeight + $(window).scrollTop()) > detachTop) { return Number.MAX_VALUE; } return navTop; } } }); 

Here is the violin .

Answer 3

Another option that may work for you: http://jsfiddle.net/panchroma/5n9vw/

HTML

 <div class="header" data-spy="affix"> affixed header, released after scrolling 100px </div> 

Javascript

 $(document).ready(function(){ $(window).scroll(function(){ var y = $(window).scrollTop(); if( y > 100 ){ $(".header.affix").css({'position':'static'}); } else { $(".header.affix").css({'position':'fixed'}); } }); }) 

Good luck