ChrFin ChrFin - 1 year ago 112
CSS Question

Bootstrap Affix not working after loading more content to page

I have a web application using Bootstrap 3.2 and a menu with the

enabled. this works fine in most scenarios except one:

I have an image gallery page where images are loaded "on the fly" when the user scrolls down - as soon as any image is added the affix breaks and does not revert the menu to
when scrolling back to the top.

See THIS fiddle (don't make the screen to big):

  • Scroll just as much down that the affix is set

  • Scroll back to the top

    ==> working (yellow margin for
    is restored):


Then do the following:

  • Scroll to the bottom so some text is added

  • Scroll back up

    ==> the
    keeps beeing
    ed and sticks to the top:


Does someone know why this is happening or how I can fix it?

Answer Source

$(window).unbind('scroll'); is causing the issue, as the Bootstrap implementation likely relies on a scroll listener. Instead, make your scroll listener into a variable and use $(window).off('scroll', scrollListener) to remove only that listener.

see: BootPly

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download