Position fixed with bootstrap columns

Question

I have a sibdebar which I want always to appear on the top of the screen when the user scroll down and get to it, so I use this thread for help: Make element fixed on scroll

Problem is, when I scroll down something with the width is going wrong. First is OK:

But when I scroll down:

The code:

<div class="row">
            <div class="col-sm-3" id="dynamic-sidebar">
                    <?php dynamic_sidebar('single_post_sidebar');?>
                <script>
                    jQuery(document).ready(function($){
                        var elementPosition = $('#dynamic-sidebar').offset();           
                        $(window).scroll(function(){
                            if($(window).scrollTop() > elementPosition.top){
                                $('#dynamic-sidebar').css('position','fixed').css('top','0');
                            } else {
                                $('#dynamic-sidebar').css('position','static');

                            }    
                        });
                    }); 
                </script>
            </div>
            <div class="col-sm-9 single-post-content">
                <?php the_content(); ?>
           </div>
 </div>

Any help will be appreciate.

Answer 1

Checkout the example below,I have just added style "right:0" and "position:fixed" to the col-3 inside col-9.

 <div class="row" style="margin-top:200px">
    <div class="col-md-3">
        <ul class="list-group">
            <li class="list-group-item">First item</li>
            <li class="list-group-item">Second item</li>
            <li class="list-group-item">Third item</li>
        </ul>
    </div>
    <div class="col-md-9">
        <div class="row">
            <div class="col-md-9">
                <!--Put here your long paragraph-->
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                <br/><br /><br />
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                <br /><br /><br />
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                <br /><br /><br />
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                <br /><br /><br />
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                <br /><br /><br />
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                <br /><br /><br />
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                <br /><br /><br />
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                <br /><br /><br />
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                <br /><br /><br />
            </div>
            <div class="col-md-2 pull-right" style="position:fixed; right: 0">
                <ul class="list-group ">
                    <li class="list-group-item">First item</li>
                    <li class="list-group-item">Second item</li>
                    <li class="list-group-item">Third item</li>
                    <li class="list-group-item">First item</li>                      
                </ul>
            </div>
        </div>

    </div>
</div>