在滚动上取消固定 Twitter 引导程序的词缀 [英] Unpin Twitter bootstrap's affix on scroll

问题描述

我在侧边栏、传统网站布局(页眉 - 内容和侧边栏 - 页脚)上使用 Twitter 引导程序的词缀.

在某个滚动点上，我希望它从页面上取消固定并返回到它的原始位置:静态，因此它不会与页脚重叠.我试图只用 CSS 摆弄它，但由于 .affix 将元素位置设置为固定，它弄乱了侧边栏的高度.

我认为这与 JS 有关系，可能是删除了词缀类.任何解决方案/建议?

解决方案

为此目的使用 data-offset-bottom 属性:

侧边栏

示例如下:http://jsfiddle.net/NwwKQ/120/>

I'm using Twitter bootstrap's affix on a sidebar, on a traditional website layout (header -content and sidebar - footer).

On a certain scroll point I want it to unpin from the page and return to it's original position:static, so it doesn't overlap the footer. I was trying to fiddle it around only with CSS, but since the .affix sets the element position as fixed it messes up the sidebar height.

I'm thinking it has something to do with JS, maybe removing the affix class. Any solutions/suggestions?

解决方案

Use data-offset-bottom property for this purpose:

<div class="sidebar" data-spy="affix" data-offset-top="50" data-offset-bottom="300">
  Sidebar
</div>

Here is the example: http://jsfiddle.net/NwwKQ/120/

这篇关于在滚动上取消固定 Twitter 引导程序的词缀的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！