Se corrigió la barra lateral de navegación en Twitter bootstrap 2.0

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

Nota: Hay un plugin jQuery bootstrap que hace esto y mucho más que se introdujo algunas versiones después de que se escribió esta respuesta (hace casi dos años) llamada Affix . Esta respuesta solo se aplica si está usando Bootstrap 2.0.4 o inferior.


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/ Editar aquí: http://jsfiddle.net/U8HGz/1/

Actualizar

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

Nota: Esta demostración fluye con la barra de navegación fija superior, por lo que ambos elementos se position:static al cambiar el tamaño de la pantalla, coloqué otra demostración debajo que mantiene la barra lateral fija hasta que la pantalla se desactiva 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

 
...

Demo , editar aquí .

nota menor: hay una diferencia de aproximadamente 10px / 1% en el ancho de la barra lateral fija, es debido al hecho de que, dado que no hereda el ancho del divisor de contenedor span3 porque es fijo tuve que encontrar una anchura. Está lo suficientemente cerca.

Y aquí hay otro método si desea mantener la barra lateral fija hasta que la cuadrícula se reduzca para la pantalla pequeña / vista 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 , editar aquí .

La última Boostrap (2.1.0) tiene una nueva característica JS “affix” 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

 

Ahora la barra lateral solo está fija, si el viewpot es más grande que 768px.

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

stickyfloat

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

HTML:

  
Content

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 que JS actualice 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 reparación de esta manera, y ponerla en su sección de cuerpo

  
test - try scroll again.

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 muy posible tener un diseño receptivo de pantalla completa.

Normalmente, necesitaría usar anchos y márgenes fijos o la navegación se superpondrá 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 ajusta el contenido cuando cambia el tamaño de la ventana a menos de 768 px y libera la navegación fija.

Ver http://www.bootply.com/ePvnTy1VII para un ejemplo de trabajo.

CSS

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

HTML

 
... Huge Content ...