jquerycsstwitter-bootstrapaffix

Bootstrap affix not keeping the column layout

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: enter image description here

However, when I scroll down, this is how it looks like: enter image description here

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?

Solution

  • 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