Question

我设法让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
         });

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

Answer 1

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

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

.affix-bottom {
    position: relative
}

Answer 2

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

我的简单解决方案是附加＆＃34;重置＆＃34;参加活动＆＃34; affixed.bs.affix＆＃34;每次运行时都会调用。

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

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

  });
});

像手套一样工作

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

Answer 4

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

Answer 5

问题是，当您滚动到400px以内时，您将其设置为底部重置。一个简单的解决方案是去除偏移底部。

Bootstrap Affix类跳到底部

5 个答案: