Bootstrap词缀类跳到底部 [英] Bootstrap Affix Classes Jumping at Bottom

问题描述

我设法使scrollspy和affix插件正常工作，但是每当用户滚动到页面底部(如果使用小的浏览器窗口)时，词缀类便开始与另一个类发生冲突，并且词缀会跳转国家之间.

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.

可以在此处查看示例: http://devng.sdss.org/results-science/

An example can be seen here: 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
         });

我认为答案就在我的面前，但是我一直盯着这个眼睛太久了，任何额外的眼睛都将是最好的选择.

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.

推荐答案

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

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
}

这篇关于Bootstrap词缀类跳到底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！