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

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 2

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