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

Respuestas:

168

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í .

Andrés Ilich
fuente
Para mí, tanto en Chrome como en Firefox, ese violín siempre tiene una barra de desplazamiento horizontal (Chrome) por debajo de un ancho de ~ 1.016 píxeles. (Más fácil de ver aquí: jsfiddle.net/U8HGz/130/show que es solo / 1 pero que muestra el ancho y la altura de la ventana debajo de "Hola mundo; no sé qué son / 2 - / 129.)
TJ Crowder
1
@TJCrowder que se debe a la margin-left:290pxdeclaración en la .span-fixed-sidebarclase hecha para dar paso a la barra lateral, si no estuviera allí, el contenido se superpondría a la barra lateral en pantallas más pequeñas. Puede eliminar la barra de desplazamiento horizontal, aunque ocultando de forma explícita en la bodyetiqueta, así: body { overflow-x: hidden; }.
Andres Ilich
Gracias. Eso podría funcionar con una consulta de medios o algo así (por lo que está ahí en ventanas realmente estrechas); pero en ese punto probablemente uno quiera reubicar la barra lateral de todos modos.
TJ Crowder
1
@mauris arregló mi demostración para admitir la función de respuesta del bootstrap.
Andres Ilich
1
@miguelcobain aquí es una versión fija , aunque no completamente probada, pero funcionó bien en mi entorno de prueba. Otra solución sería usar el plugin affix bootstrap, que brinda soporte nativo para secciones fijas en el bootstrap ... esta solución fue escrita en un momento en que no teníamos ninguno.
Andres Ilich
46

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

Joyrex
fuente
@AlexanderRechsteiner En realidad, no. El OP menciona específicamente Bootstrap 2.0.
Kyle
27

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.

HaNdTriX
fuente
1

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

flotar pegajoso

Zuhaib Ali
fuente
0

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.

mdashx
fuente
0

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>
verdier
fuente
0

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>
Christian.D
fuente