Bootstrap Affix not working after loading more content to page

Question

I have a web application using Bootstrap 3.2 and a menu with the Affix 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 affix-top 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 MENU ITEM is restored):

Then do the following:

• Scroll to the bottom so some text is added
• Scroll back up
  ==> the MENU ITEM keeps beeing affixed and sticks to the top:

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

Answer 1

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