Twitter Bootstrap affix events not firing

Question

I'm trying to affix a toolbar when the user scrolls passed it. The affix portion works fine however I want to adjust the padding on my main container when the affix class actually get applied. http://getbootstrap.com/javascript/#affix-usage Has some events listed However; I can't get any of them to fire. The JSfiddle doesn't look right I'm guessing cuz of the size. But essentially none of those events get fired when the affix is applied to the #nav.

$('#nav').on('affix.bs.affix', function () {
     alert('Fired!');
});

You can see more of my code here.. Its essentially just the navbar given in the BS example.

http://jsfiddle.net/dTR4A/1/

Answer 1

The affix.bs.affix event fires when the affixed element is scrolled so if you scroll the page:

This event fires immediately before the element has been affixed.

so make your page content higher.

Demo: http://jsfiddle.net/4vmMd/

Answer 2

Encountered a similar problem.. Turns out that it was older version of bootstrap. It worked just fine with newer version. Also ensure that your content has enough height.

Answer 3

For future travelers falling into this issue, I was having the same issue but the above solutions did not work for me.

I found out that in a completely remote part of my application, we have:

$(window).unbind('scroll')
$(window).off('scroll')

Which was killing the handler for the scroll event (probably, the Affix library observes the $(window) element in order to fire the scrolling events).

Hope this helps.