jquery – Bootstrap Affix类跳到底部

我已经设法让scrolllspy和affix插件工作得很好,但每当用户滚动到页面底部时(如果使用一个小浏览器窗口),词缀类开始与另一个冲突,并且词缀在状态之间跳转.

这里可以看到一个例子：http://devng.sdss.org/results-science/

CSS是：

.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;
   }

}

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

我觉得答案就在我的面前,但我已经盯着这个太久了,任何额外的眼睛都会受到最多的赞赏.

内联位置与.affix状态相对冲突.

这解决了我的问题,因为内联样式位置相对,附加元素跳回到顶部：

.affix-bottom {
    position: relative
}