Unpin Twitter bootstrap's affix on scroll

Question

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?

Answer 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/