Bootstrap affix not keeping the column layout

Question

When I scroll down in my browser (chrome), the right column is pushed all the way to the left, my sidebar is pushed to the background, and and all the right-side content is over the left-side sidebar.

This only happens when I apply the affix properties to my sidebar div.

If you notice, under normal situations, the page is rendered without a problem, as you can see below:

However, when I scroll down, this is how it looks like:

For your reference, this is how I'm implementing the affix div:

<div class="row content-wrapper">
    <div data-spy="affix" data-offset-top="200" data-offset-bottom="200" id="myAffix">
        <div class="col-lg-3">
            <!-- Sidebar code -->
        </div>
    </div>
    <div class="col-lg-9">
            <!-- content -->
    </div>
</div>

Here's a link to JS fiddle, so that you can see the problem happening live:

Here's a JS fiddle for you to see the error:

http://jsfiddle.net/fH46S/2/

How can I fix this?

Answer 1

Here's something to get you started: http://jsfiddle.net/panchroma/H2KU7/

It still needs refinememt but the important bit is done. The key to this is than when you use affix, the Bootstrap JS applies the class of .affix to the div you are spying on after the set amount of scrolling. This affix class has the css

position:fixed;

which is what stops the div from scrolling. It also takes the div out of normal flow, which is why you get the overlap.

My solution was to wrap a new div around left hand side bar, and apply the affix behaviour to this. Your original code is was taking the <div class="col-lg-3"> out of normal flow, and that was the root of the problem.

HTML

 <div class="col-lg-3">
    <div class="wrap" data-spy="affix" data-offset-top="200" data-offset-bottom="200" id="myAffix">
       <!-- your nav div here -->
    </div> <!-- close wrap -->
  </div> <!-- close col-lg-3 -->    

EDIT
TO refine your css for the behaviour of the left hand column when it's affixed, target the left hand column with something like

.col-lg-3 .wrap.affix{
 /* custom afix padding and styling here */
}

Hope this helps!

Answer 2

You have a couple of things going on here. The first problem is you're trying to use Bootstrap's scaffolding in conjunction with its affix feature. You'll notice that on smaller screens, the affix feature is still active and when you scroll down the screen, it overlays on top of the results section.

You can fix this by adding a container DIV outside of the #myAffix element and then using position: relative !important; in conjunction with a media query set at 1200px to disable the affix feature for devices with a small screen width.

The second thing that is happening is the fixed position of your affixed element is out of position. Take out

#myAffix{
    left: 0px;
} 

and add

.affix{
    top: 0px !important;
}

Now you'll have a fixed navbar on the left hand side that works seamlessly with the rest of the page.

To see it all together, check out the updated fiddle example