Bootstrap Affix Classes Jumping at Bottom

Question

I've managed to get the scrollspy and affix plugins to work just fine, but whenever the user scrolls to the bottom of the page (if using a small browser window) the affix classes start conflicting with another, and the affix jumps between states.

An example can be seen here: http://devng.sdss.org/results-science/

The CSS is:

.affix-top,.affix{
  position: static;
}

#sidebar li.active {
   border:0 #eee solid;
   border-right-width:5px;
}
@media (min-width: 979px) {
   #sidebar.affix-top {
     position: static;
     margin-top:30px;
   }
   #sidebar.affix {
     position: fixed;
     top:70px;
   }

   #sidebar.affix-bottom {
    position: fixed;
    bottom: 400px;
   }

}

And JS:

$('#leftCol').affix({
           offset: {
             top: 235
             ,bottom: 400
           }
         });

         /* activate scrollspy menu */
         var $body   = $(document.body);
         var navHeight = $('.navbar').outerHeight(true) + 10;

         $body.scrollspy({
           target: '#leftCol',
           offset: navHeight
         });

I think the answer is right in front of my face but I've been staring at this too long, and any extra set of eyes would be most appreciated.

Answer 1

Updating Bootstrap helped me! I used Version 3.0.0, which had some Problems with the affix Plugin.

Answer 2

The inline position relative conflicts with the .affix state.

This fixed my problem where the affixed element jumped back to the top because of the inline style position relative:

.affix-bottom {
    position: relative
}

Answer 3

This is a quite old post, but I ran past the issue today (Boostrap 3.3.5) and experienced the same thing.

My simple solution was to attach an "reset" to the event "affixed.bs.affix" which calls everytime it runs affix.

$().ready( function() {
  $("#nav").on("affixed.bs.affix", function(){

    $("#nav").attr("style","");

  });
});

works like a glove

Answer 4

The problem is that when you scroll to within that 400px you set as the bottom it resets. A simple solution is to remove the offset bottom.

Answer 5

After hacking around I finally got the interaction just the way I wanted it.

I found that while affix-ing, the style on the property needed to be top: 0;. When affix-bottom is applied, position: relative; is applied to the element. When the affix is transitioning from "affix-bottom" to affix, the position: relative; stays and top: 0; is never put back. So, I do it manually.

Here's the code:

$("#nav").on("affixed.bs.affix", function(){
  if($(this).hasClass('affix') && $(this).attr('style').indexOf('position: relative;') > -1) {
    $(this).attr('style', $(this).attr('style').replace('position: relative;', 'top: 0px;'));
  }        
});