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/

Peddada

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/

Fealty

I couldn't for the life of me get your example to work. It had something to do with my bootstrap.min.js .. I used the version JSFiddle was using and it worked. Thanks +1 – Peddada

Same problem here, there must be a bug with the earlier versions of bootstrap 3. – Buber

Had the same issue too, updating 3.0.2 to 3.1.1 did the trick for me. – Pasol

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.

Vansickle

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.

Malloy

and how did you bind it again that the affix know the handler – Concealment