unable to specify css position=fixed

Question

I have 3 vertical div i.e right-sidebar, content, left-sidebar. When user scroll the page i want to fixed the right-sidebar to the top. Like this image

But currently when ever i scroll my page down , the second sidebar overlapps with first sidebar as shown in this image. What is the reason? anyone please help me. -thanks

---

 <script type="text/javascript">
        function fixDiv() {
    var $div = $("#navwrap");
    if ($(window).scrollTop() > $div.data("top")) { 
        $('#navwrap').css({'position': 'fixed','z-index': '1', 'top': '0'}); 
    }
    else {
        $('#navwrap').css({'position': 'static', 'top': 'auto'});
    }
} 
$(document).ready(function () {
       $("#navwrap").data("top", $("#navwrap").offset().top); // set original position on load
$(window).scroll(fixDiv);
});
     </script>

HTML code

<div class="container">
    <div class="row clearfix">
        <div class="col-md-3 column" id="navwrap">
            <div class="btn-group">
                 <button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-left"></em></button> <button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-center"></em></button> <button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-right"></em></button> <button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-justify"></em> Justify</button>
            </div>
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <div class="btn-group">
                         <button class="btn btn-default">Action</button> <button data-toggle="dropdown" class="btn btn-default dropdown-toggle"><span class="caret"></span></button>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="#">Action</a>
                            </li>
                            <li class="disabled">
                                <a href="#">Another action</a>
                            </li>
                            <li class="divider">
                            </li>
                            <li>
                                <a href="#">Something else here</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="list-group">
                 <a href="#" class="list-group-item active">Home</a>
                <div class="list-group-item">
                    List header
                </div>
                <div class="list-group-item">
                    <h4 class="list-group-item-heading">
                        List group item heading
                    </h4>
                    <p class="list-group-item-text">
                        ...
                    </p>
                </div>
                <div class="list-group-item">
                    <span class="badge">14</span>Help
                </div> <a class="list-group-item"><span class="badge">14</span>Help</a>
            </div>
        </div>
        <div class="col-md-9 column">
            <div class="row clearfix">
                <div class="col-md-9 column">
                    <p>
                        Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
                    </p>
                </div>
                <div class="col-md-3 column">
                    <p>
                        Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, osuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

You are using the bootstrap so I think it's obvious to use its affix feature.

Link for jsFiddle

Just wrap all content of .col-sm-3 in another div and add attributes data-spy, data-offset-top and data-offset-bottom and according to them bootstrap will do all the work.

Otherwise you can use javascript code:

$('.sidebar').affix({offset:{
                        top:60,
                        bottom:200
                     });

HTML:

<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <div class="sidebar" data-spy="affix" data-offset-top="60" data-offset-bottom="200">
                <div class="btn-group">
                    <button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-left"></em></button>
                    <button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-center"></em></button>
                    <button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-right"></em></button>
                    <button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-justify"></em>Justify</button>
                </div>
                <div class="row clearfix">
                    <div class="col-md-12 column">
                        <div class="btn-group">
                            <button class="btn btn-default">Action</button>
                            <button data-toggle="dropdown" class="btn btn-default dropdown-toggle"><span class="caret"></span></button>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">Action</a>
                                </li>
                                <li class="disabled">
                                    <a href="#">Another action</a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a href="#">Something else here</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="list-group">
                    <a href="#" class="list-group-item active">Home</a>
                    <div class="list-group-item">
                        List header
                    </div>
                    <div class="list-group-item">
                        <h4 class="list-group-item-heading">List group item heading
                        </h4>
                        <p class="list-group-item-text">
                            ...
                        </p>
                    </div>
                    <div class="list-group-item">
                        <span class="badge">14</span>Help
                    </div>
                    <a class="list-group-item"><span class="badge">14</span>Help</a>
                </div>
            </div>

        </div>
        <div class="col-md-9">
            <div class="col-md-9">
                <p>
                    Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
                </p>
            </div>
            <div class="col-md-3">
                <p>
                    Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, osuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
                </p>
            </div>
        </div>
    </div>
</div>

Answer 2

You could try the stickyMojo plugin.

Answer 3

When you are position the sidebar fixed, you take it out of the document flow.

That is, the content div is sitting next to the sidebar, when the sidebar is removed, the content naturally flows as far left as it can go.

If you were to position the sidebar on the right hand side of the screen, the content would stay in the same position.

One solution would be to dynamically (with jQuery) add a left margin to the content div when the sidebar goes fixed.