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?

Jardine

You have minified JS and CSS on your JSFiddle that seems to include both the actual Bootstrap library files and your own scripts / mark-up. Can you break them apart and only include your own scripts / mark-up on the fiddle? You can load the Bootstrap files using the 'External Resources' section on the left hand side of the page – Externality

@LloydBanks didn't realize I could do that in JSFiddle. It's been fixed, and thank you for pointing out! – Jardine

Answer 1

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

Externality

Awesome, this actually solved my problem and worked flawlessly. Thanks for pointing the @media query, it would have never occurred to me. – Jardine

Answer 2

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!

Kaneshakang

Answer 3

Set two nearly same navbar. One of them has class = "navbar navbar-fixed-top" , id="nav_first" and style="visibility:hidden;" . Second one has class="navbar" and id="nav_second". Except for these differences, these navbars are totally the same.

Also, add this js code to the page:

$(document).ready(function(){
        console.log("document is ready");
       
        $(document).scroll(function(){
            console.log("hoook");
            var dist = elementOffset = $('#nav_second').offset().top  - $(window).scrollTop();
            console.log("dist: "+dist);
            if(dist<=0){
                $("#nav_first").css("visibility","visible");
            }
            else{
                
                $("#nav_first").css("visibility","hidden");
            }
        });
        
    });

Prosector