fixed div inside bootstrap column

Question

I'm trying to make a two column responsive layout using bootstrap, in the left column I would like to place a menu, and in the right an image gallery. I would like the menu to stay fixed while scrolling through the images on right.

The difficulty is that I want the fixed menu to be fluid with the bootstrap layout. So while I don't want it to move up and down when scrolling I do want it to reposition itself when resizing the screen.

This website is an example of what I mean: http://www.galeriebertrand.com/artists

I can't seem to figure how it was done on this site, it doesn't seem like the left column has fixed positioning.

Answer 1

You'll have to use media queries to set the sidebar as position: fixed while the width of the screen is wide.

Heres an example: http://jsfiddle.net/hajpoj/Q7A33/1/

HTML:

<div class="row">
    <div class="col-sm-4 sidebar-outer">
        <div class="sidebar">/* fixed sidebar */
        </div>
    </div>
    <div class="col-sm-8">
        <div class="content"> /*fluid content */
        </div>
    </div>
</div>

CSS:

.sidebar-outer {
    position: relative;
}
@media (min-width: 768px) {
    .sidebar {
        position: fixed;
    }
}

Basically in this example the columns become stacked at 768px wide (or bootstraps "small" width). If you wanted it to become stacked at a different width like bootstrap's "medium" width (992px) you'll want to change col-sm-4, col-sm-8 to col-md-4, col-md-8 and change @media (min-width: 768px) to @media (min-width 992px)