Unpin Twitter bootstrap's affix on scroll

问题:

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?

回答1:

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/