3

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

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

4

5 回答 5

8

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

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

.affix-bottom {
    position: relative
}
于 2014-09-17T15:23:57.143 回答
1

更新 Bootstrap 对我有帮助！我使用的是 3.0.0 版，它的词缀插件有一些问题。

于 2017-03-21T16:45:25.307 回答
1

在到处乱搞之后，我终于按照我想要的方式进行了交互。

我发现，虽然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;'));
  }        
});
于 2015-12-17T16:56:27.817 回答
1

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

我的简单解决方案是将“重置”附加到事件“affixed.bs.affix”，该事件每次运行词缀时都会调用。

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

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

  });
});

像手套一样工作

于 2015-11-22T22:52:18.530 回答
0

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.

于 2016-03-28T21:09:54.493 回答