ChrFin ChrFin - 2 months ago 12
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
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):



description

Then do the following:


  • Scroll to the bottom so some text is added

  • Scroll back up

    ==> the
    MENU ITEM
    keeps beeing
    affix
    ed and sticks to the top:



disc

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

Answer

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

Comments