How to Keep the Sidebar Fixed on Scroll in Fluid Bootstrap 2.0?

Keeping the Sidebar Fixed on Scroll in Fluid Bootstrap 2.0

For fluid layout, it's possible to fix the sidebar navigation on scroll by implementing a custom class.

Custom CSS

Create a .sidebar-nav-fixed class to control the sidebar's fixed position and add .row-fluid > .span-fixed-sidebar to the content container to offset the sidebar's margin. Here's the CSS:

.sidebar-nav-fixed {
    padding: 9px 0;
    position:fixed;
    left:20px;
    top:60px;
    width:250px;
}

.row-fluid > .span-fixed-sidebar {
    margin-left: 290px;
}

HTML Structure

Use the following HTML structure to implement the fixed sidebar:

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span3">
      <div class="well sidebar-nav sidebar-nav-fixed">
        ...
      </div>
    </div>
    <div class="span9">
      ...
    </div>
  </div>
</div>

Advanced Configuration

For more flexibility, use CSS media queries to adjust the sidebar's position based on screen size. Here's an example:

@media (max-width: 767px) {
    .sidebar-nav-fixed {
        width:auto;
    }
}

@media (max-width: 979px) {
    .sidebar-nav-fixed {
        position:static;
        width: auto;
    }
}

This configuration keeps the sidebar fixed until the screen size drops for small screens or mobile view.

The above is the detailed content of How to Keep the Sidebar Fixed on Scroll in Fluid Bootstrap 2.0?. For more information, please follow other related articles on the PHP Chinese website!