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

InformationsquelleAutor sl_bug | 2012-02-19

7 Comentarios

  1. 168

    Nota: Hay un bootstrap jQuery plugin que hace esto y mucho más de lo que se introdujo un par de versiones después de esta respuesta fue escrito (casi dos años) llamado Afijo. Esta respuesta sólo se aplica si usted está usando Bootstrap 2.0.4 o inferior.


    Sí, basta con crear una nueva clase fija para la barra lateral y añadir un offset de clase a su contenido div para compensar el margen de la izquierda, así:

    CSS

    .sidebar-nav-fixed {
        padding: 9px 0;
        position:fixed;
        left:20px;
        top:60px;
        width:250px;
    }
    
    .row-fluid > .span-fixed-sidebar {
        margin-left: 290px;
    }

    Demo: http://jsfiddle.net/U8HGz/1/show/
    Editar aquí: http://jsfiddle.net/U8HGz/1/

    Actualización

    Fijo mi demo para apoyar el responsive bootstrap hoja, ahora fluye con la función de respuesta de la secuencia de arranque.

    Nota: Esta demo de los flujos con el fijo superior de barra de exploración, por lo que ambos elementos se vuelven position:static al cambio de tamaño de pantalla, he puesto otro demo que mantiene fija la barra lateral hasta que la pantalla de gotas 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, editar aquí.

    nota menor de edad: no se trata de un 10px/1% de diferencia en el ancho de la barra lateral, que es debido a el hecho de que ya no heredan el ancho de la span3 div contenedor porque es fija que me tenía que venir para arriba con un ancho. Es lo suficientemente cerca.

    Y aquí es otro método si desea mantener la barra lateral fija hasta que la cuadrícula gotas para los pequeños de la pantalla/visualización de 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í.

    • Para mí tanto en Chrome y Firefox, que el violín siempre tiene una barra de desplazamiento horizontal (Chrome) por debajo de un ancho de ~1,016 píxeles. (Más fácil ver aquí: jsfiddle.net/U8HGz/130/show que es justo /1, pero la visualización de la ventana de la anchura y la altura por debajo de «Hola Mundo; no sé qué /2 – /129 son.)
    • que es debido a la margin-left:290px declaración sobre la .span-fixed-sidebar clase a hacer el camino para la barra lateral, si no estaba allí, el contenido superposición de la barra lateral en pantallas más pequeñas. Usted puede eliminar la barra de desplazamiento horizontal a pesar de que explícitamente escondiendo en el body etiqueta, así: body { overflow-x: hidden; }.
    • Gracias. Que podría trabajar con una consulta de medios de comunicación o algo así que es allí en realmente ventanas estrechas); pero en ese momento probablemente uno quiere reubicar la barra lateral de todos modos.
    • creo que es una buena idea, la barra lateral puede ser posicionado relativamente en el cambio de tamaño de ventana de apoyar ventanas estrechas. Va a jugar con los que más tarde, y después de volver.
    • Esto no parece agregar barras de desplazamiento en la barra lateral si mi navegador ventana es demasiado pequeña. Si quería que debo pegarlo en una desplazable div o algo?
    • para obtener scrollbas en el fijo de la barra lateral si la ventana es menor que la altura de la barra lateral que sería necesario agregar una altura determinada (o algo así height:100% si que funciona para usted) a la .sidebar-nav-fixed clase que he creado en conjunto con la propiedad overflow-y:auto.
    • Se rompe la capacidad de respuesta. le suspiro
    • fijo mi demo de ti de apoyo a la función de respuesta de la secuencia de arranque.
    • href=»http://i.imgur.com/YnG7K.png» >Esta superposición es el único problema con su última demo.
    • Parece que de esta forma se rompe la fluidez del diseño. Debido a que la barra lateral no es la escala, el texto se recorta como la ventana se estrecha y no ocupan toda la anchura de la ventana se pone de ancho.
    • di cuenta de tu comentario. Va a venir para arriba con una solución en algún momento de mañana, ya que no tienen el tiempo.
    • Sólo lo probé con la última bootstrap de la hoja y la barra lateral escalas para mí, ¿no se expanda con el navegador?
    • problema se ha solucionado, echa un vistazo thi violín de prueba: jsfiddle.net/ukMqq/94
    • es sólo un problema con el primero que has publicado (con el ancho fijo de la barra lateral). El responsive queridos un gran trabajo.
    • En su última revisión, porque le he cambiado el z-index a -1, enlaces de navegación son ya no se puede hacer clic.
    • en un dispositivo móvil que quieres decir? Me puede hacer clic en ellos, bien en un escritorio
    • Cuando abro este violín jsfiddle.net/ukMqq/94 en mi Google Chrome en Windows, yo no haga clic en cualquiera de los enlaces en la barra lateral. 🙁
    • aquí es un versión, no totalmente probado, pero aunque trabajó muy bien en mi entorno de prueba. Otra solución sería el uso de la afijo bootstrap plugin, que trae soporte nativo para las secciones fijas en el proceso de arranque….esta solución fue escrito en un momento en que no tenía ninguno.
    • Estoy usando el afijo plugin ahora. El soporte de desplazamiento es muy útil. Gracias.
    • +1 Gracias, que me ha ayudado mucho
    • Para su INFORMACIÓN, sus demos están rotos

  2. 27

    esto tornillo hasta el responsive Webdesign.
    Mejor envoltura de la barra lateral fija en una consulta de medios de comunicación.

    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 se fija, si la viewpot es más grande que 768px.

    • Fue genial, saludos!
    • bonito y elegante. gracias
  3. 0

    Empecé con Andrés respuestas y terminó consiguiendo un sticky sidebar como este:

    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);

    Estoy asumiendo también necesito JS para la actualización de la ‘sidebarwidth’ variable cuando la ventana cambia de tamaño.

  4. 0

    Muy fácil conseguir arreglar nav o todo lo que la etiqueta que desea. Todo lo que necesitas es escribir la etiqueta de corrección como este, y lo puso en su cuerpo la sección

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

    Con la actual versión de Bootstrap (3.3.2) no es un buen camino para lograr un fijo de la barra lateral de navegación.

    Esta solución también funciona bien con la re-introducido en el contenedor del líquido de la clase, lo que significa que es fácilmente posible tener una capacidad de respuesta completa el diseño de la pantalla.

    Normalmente sería necesario el uso de ancho fijo y los márgenes o la navegación se superpondrían el contenido, pero con la ayuda del marcador de posición vacío de la columna, el contenido es el que siempre se coloca en el lugar correcto.

    El programa de instalación siguiente envuelve el contenido en torno al cambiar el tamaño de la ventana a menos de 768px 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

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

Dejar respuesta

Please enter your comment!
Please enter your name here