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.