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

我觉得答案就在我面前，但我一直盯着这个太久了，任何额外的一双眼睛都会受到赞赏。

Answer 1

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

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

 .affix-bottom { position: relative } 

Answer 2

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

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

 $().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内时，您将其设置为底部重置。 一个简单的解决方案是去除偏移底部。