Bootstrap affix and overflow-y conflict

Question

The issue I'm having right now involves twitter bootstraps affix and css overflow-y.

The Details

I have a 41 pixel bootstrap navbar fixed to the top and bottom (used for header/footer).

div.container-fluid is used as the main content body. I use position: absolute to position it between the header and footer and I have overflow-y: scroll to make it scroll through overflowed content.

div.side-bar is used as the side navigation on the left side of the page and is nested in a div.span3. I use jquery to call the affix on the side nav.

The Problem

When I add overflow-y: scroll to the div.container-fluid I get the scrolling in the right spot ... but the affix isn't applied (based on the actions)

But when I remove overflow-y: scroll altogether, the scroll bar extends to the whole page (and not just the div.container-fluid) but the affix does apply.

Here are two links to one with overflow-y and one without overflow-y

No Affix effect http://jsfiddle.net/VincentWilkie/YRxkU/

Affix effect with bad scrolling http://jsfiddle.net/VincentWilkie/cKJV2/

I need it so that the scroll bar doesn't extend into the header and footer :(

Thanks for any help!

Vincent Wilkie

Answer 1

You just need to add data-spy="affix" to the #side-bar div. Here is a working example:

http://jsfiddle.net/skelly/YRxkU/2/

Answer 2

I was able to figure out a solution that worked for me.

I ended up using .affix({ offset: { x: 10, top: 20 } }) to position it properly.

I also remove the overflow.

Thanks!