Bootstrap Affix Classes Jumping at Bottom

问题

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.

回答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
}

回答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

回答3:

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;'));
  }        
});