ChrFin ChrFin - 5 months ago 38
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?


$(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