Navegación de barra lateral fija en fluido twitter bootstrap 2.0

¿Es posible hacer que la navegación de la barra lateral permanezca siempre fija en el desplazamiento en un diseño fluido?

Nota: Hay un complemento jQuery de arranque que hace esto y mucho más que se introdujo algunas versiones después de que se escribiera esta respuesta (hace casi dos años) llamado Affix . Esta respuesta solo se aplica si está utilizando Bootstrap 2.0.4 o una versión anterior.

Sí, simplemente cree una nueva clase fija para su barra lateral y agregue una clase de compensación a su div de contenido para compensar el margen izquierdo, así:

CSS

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

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

Demostración: http://jsfiddle.net/U8HGz/1/show/ Edite aquí: http://jsfiddle.net/U8HGz/1/

Actualizar

Se corrigió mi demostración para admitir la hoja de arranque receptivo, ahora fluye con la función de respuesta del bootstrap.

Nota: Esta demostración fluye con la barra de navegación fija superior, por lo que ambos elementos se convierten position:staticen el cambio de tamaño de la pantalla, coloqué otra demostración debajo que mantiene la barra lateral fija hasta que la pantalla cae para la vista móvil.

CSS

.sidebar-nav-fixed {
     position:fixed;
     top:60px;
     width:21.97%;
 }

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

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

HTML

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

</div><!--/.fluid-container-->

Demo , edite aquí .

^{Nota menor: hay una diferencia de aproximadamente 10px / 1% en el ancho de la barra lateral fija, se debe al hecho de que, dado que no hereda el ancho del div del contenedor span3 porque es fijo, tuve que crear un anchura. Está lo suficientemente cerca.}

Y aquí hay otro método si desea mantener la barra lateral fija hasta que la cuadrícula caiga para la vista de pantalla pequeña / móvil.

CSS

.sidebar-nav-fixed {
    position:fixed;
    top:60px;
    width:21.97%;
}

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

@media (max-width: 979px) {
    .sidebar-nav-fixed {
        top:70px;
    }
}

Demo , edite aquí .

El último Boostrap (2.1.0) tiene una nueva función de "afijo" JS específicamente para este tipo de aplicación, FYI.

esto arruinará el diseño web receptivo. Mejor envuelva la barra lateral fija en una consulta de medios.

CSS

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

HTML

<div class="span3 sb-fixed">
   <div class="well sidebar-nav">
      <!-- Sidebar Contents -->
   </div>
</div>

Ahora la barra lateral solo está fija, si el área de visualización es más grande que 768px.

Esto no es posible sin javascript. Encuentro affix.js demasiado complejo, así que prefiero usar:

flotar pegajoso

Comencé con las respuestas de Andrés y terminé obteniendo una barra lateral pegajosa como esta:

HTML:

<div class="span3 sidebar-width">
  <div class="well sidebar-nav-fixed">
    Sidebar
  </div>
</div>

<div class="span9 span-fixed-sidebar">
  Content
</div> <!-- /span -->

CSS:

.sidebar-nav-fixed {
  position:fixed;
}

JS / jQuery:

sidebarwidth = $(".sidebar-width").css('width');
$('.sidebar-nav-fixed').css('width', sidebarwidth);
contentmargin = parseInt(sidebarwidth) + 60;
$('.span-fixed-sidebar').css('marginLeft', contentmargin);

Supongo que también necesito JS para actualizar la variable 'sidebarwidth' cuando se cambia el tamaño de la ventana gráfica.

Muy fácil de arreglar nav o todo lo que quieras. Todo lo que necesita es escribir su etiqueta de corrección de esta manera y ponerla en la sección de su cuerpo

   <div style="position: fixed">
       test - try  scroll again. 
   </div>

Con la versión actual de Bootstrap (3.3.2) hay una buena manera de lograr una barra lateral fija para la navegación.

Esta solución también funciona bien con la clase de fluido de contenedor reintroducida, lo que significa que es fácilmente posible tener un diseño de pantalla completa receptivo.

Normalmente, necesitaría usar anchos y márgenes fijos o la navegación se superpondría al contenido, pero con la ayuda de la columna de marcador de posición vacía, el contenido siempre se coloca en el lugar correcto.

La siguiente configuración envuelve el contenido cuando cambia el tamaño de la ventana a menos de 768px y libera la navegación fija.

Consulte http://www.bootply.com/ePvnTy1VII para ver un ejemplo funcional.

CSS

@media (min-width: 767px) { 
    #navigation{
        position: fixed;
    }
}

HTML

<div class="container-fluid">
 <div class="row">
  <div id="navigation" class="col-lg-2 col-md-3 col-sm-3">
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 1</a></li>
    </ul>
  </div>

  <div class="col-lg-2 col-md-3 col-sm-3 hidden-xs">
    <!-- Placeholder - keep empty -->
  </div> 

  <div id="main" class="col-lg-10 col-md-9 col-sm-9 fill">
     ...
     Huge Content
     ...
  </div> 
 </div>
</div>