Using Bootstrap grid with fixed position div

Question

I am trying to use the Bootstrap grid layout, but also with one div that is fixed vertically as you scroll down the page. To fix the div, I am using 'position:fixed' but this seems to break the containing class. The text overflows into the next column, which it shouldn't do.

    <div class="container">
    <div class="row-fluid">
        <div class="col-md-1">
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit euismod dolor id posuere. In vulputate lacinia sem vel dignissim. Donec eu ornare lacus. Vestibulum quis enim et mauris mattis commodo blandit eget lectus. Sed sem augue, aliquet ac vulputate in, congue suscipit justo. Duis ac rhoncus tellus. Sed eu faucibus leo. Mauris imperdiet nisi vitae nisi varius, a egestas purus laoreet. Suspendisse eu sodales mi. Nunc in laoreet ipsum, id mattis massa. Sed in iaculis augue, vel commodo turpis. Aliquam placerat velit in justo vulputate, eu pulvinar nunc facilisis. Maecenas sit amet purus est. Integer in pharetra tortor. Donec ac lorem massa. Fusce ac eros pharetra, blandit tellus at, varius velit. 
            </div>
        </div>
        <div class="col-md-5">
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit euismod dolor id posuere. 
            </div>
        </div>

        <div class="col-md-3">
            <div style="position:fixed">
                <b>This should remain fixed as I scroll down the page</b> 
            </div>
        </div>

        <div class="col-md-3">
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit euismod dolor id posuere. 
            </div>
        </div>
    </div>
</div>

What should I do to keep the div fixed as I scroll, but also adhere to the grid layout that Bootstrap sets out?

Can the [affix](http://getbootstrap.com/javascript/#affix) help you? — lavrik, Feb 26 '14 at 15:02
So I'd have to have that div entirely separate, outside of the bootstrap grid? Is there no way to have it collapseable upon resize, like col-md-3 makes it do? — RamblerToning, Feb 26 '14 at 15:50

kevMul · Answer 1 · 2014-10-09T14:55:09.287

What I did to solve this was to make jQuery get the size of the div at the page load, then pass it to the internal div's css. like this:

var divWidth = $( '.yourDiv' ).width();

This will grab the width as soon as the page loads.

function keepDivWidth() {
  $( window ).scroll( function () {
    var top = $( window ).scrollTop();
    if ( top >= 10 ) ) {
      $( '.yourDiv' ).addClass( 'fixed' );
      $( '.yourDiv' ).css({
         "width" : divWidth
         })
    }else{
      $( '.yourDiv' ).removeClass( 'fixed' );
      $( '.yourDiv' ).css({
        "width" : ""
      })
    }
  })
}(jQuery);

the if ( top >= 10 ) part can be anything you want. The '10' is just filler Then it is as easy as calling your new function in your web page!

$(document).ready(function(){
    keepDivWidth();
});

Or, I think you can just wrap what you need in a div with class of row. I haven't tested that yet though.

Using Bootstrap grid with fixed position div

1 Answers1