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

回答4:

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

回答5:

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.