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?

I don't think this is possibly with the standard Twitter Bootstrap affix module. — Jesse, Feb 22 '13 at 21:12
I think you are looking for a question [answered here.][1] Check out the fiddle. [1]: http://stackoverflow.com/questions/15197453/affix-div-to-bottom-of-window?rq=1 — Thomas, Apr 24 '13 at 18:16

score 3 · Answer 1 · answered Feb 22 '13 at 21:41

3

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.

answered Feb 22 '13 at 21:41

Miljan Puzović

5,840
1
24
30

IT is possible with bootstrap and js – Shail Feb 23 '13 at 05:00
"With bootstrap and js"... That means - use bootstrap, but also change provided js code and create your own. If OP could do that, he never ask this question. So I pointed out on small script, simple to use. – Miljan Puzović Feb 28 '13 at 11:41
@Shail How is it possible with twitter-bootstrap? I'd like to avoid having to use another lib (such as hcSticky or jsfiddle). – Geoffrey De Smet Jun 27 '13 at 12:15

score 3 · Answer 2 · answered Jul 04 '13 at 02:42

You can write the logic in a function, and pass it to 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;
        }
    }
});

Fiddle is here.

Awesome, just what I needed. Multiple navbar version right here: http://jsfiddle.net/BuNq2/5/ — fro_oo, May 13 '15 at 19:40

score 2 · Answer 3 · answered Jul 04 '13 at 04:07

Another option which might 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!

Attach and detach affixed headers with Twitter Bootstrap

3 Answers3