Bootstrap 词缀类在底部跳跃答案

【问题标题】：Bootstrap Affix Classes Jumping at BottomBootstrap 词缀类在底部跳跃
【发布时间】：2014-06-03 18:33:51
【问题描述】：

我已经设法让 scrollspy 和 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
         });

我认为答案就在我面前，但我已经盯着这个太久了，任何额外的眼睛都会非常感激。

【问题讨论】：

标签： jquery css twitter-bootstrap scrollspy affix

【解决方案1】：

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

这解决了我的问题，即由于内联样式相对位置，附加元素跳回顶部：

.affix-bottom {
    position: relative
}

【讨论】：

【解决方案2】：

这是一篇相当老的帖子，但我今天遇到了这个问题（Boostrap 3.3.5）并遇到了同样的事情。

我的简单解决方案是在每次运行 affix 时调用的事件“affixed.bs.affix”中附加一个“重置”。

$().ready( function() {
  $("#nav").on("affixed.bs.affix", function(){

    $("#nav").attr("style","");

  });
});

像手套一样工作

【讨论】：

【解决方案3】：

经过一番折腾，我终于得到了我想要的交互方式。

我发现虽然affix-ing，但属性上的样式需要是top: 0;。当affix-bottom 被应用时，position: relative; 被应用到元素上。当词缀从“词缀底部”过渡到affix 时，position: relative; 保持不变，top: 0; 永远不会放回原处。所以，我手动完成。

代码如下：

$("#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】：

更新 Bootstrap 帮助了我！我使用的是 3.0.0 版本，插件插件有一些问题。

【讨论】：

【解决方案5】：

问题在于，当您滚动到您设置为底部的 400 像素内时，它会重置。一个简单的解决方案是移除偏移底部。

【讨论】：