Usar una posición fija con un marco de diseño de cuadrícula

Así que estoy creando una página web, donde los menús en el lado izquierdo están fijos (Te siguen cuando te desplazas hacia arriba y hacia abajo de la página). Actualmente estoy usando el diseño The Grid: Foundation (por zurb) http://foundation.zurb.com/docs/grid.php. Que usa una grilla de doce columnas. Tengo problemas para posicionar el diseño fijo y seguir usando la cuadrícula al mismo tiempo. ¿Cómo puedo usar un diseño de cuadrícula y elementos fijos en una página?Usar una posición fija con un marco de diseño de cuadrícula

<div class="container"> 
    <div class="row"> 
     <div class="four columns relativePosition"> 
       <div class="fixedPosition"> 
        <div class="four columns"> 
         Menu Here 
        </div> 
       </div> 
     </div> 
     <div class="eight columns"> 
       Other Content 
     </div> 
    </div> 
</div>

que era capaz de conseguir la posición fija para trabajar el uso de esta estructura, pero en algunos casos el contenido del menú crece demasiado grande y la superposición de los contenidos de la columna de ocho. No sé si hay una mejor manera de hacer esto?

Fuente

2012-02-29 Adim

Encontrado este artículo - ZURB + ScrollSpy. Lo tengo trabajando en 5 minutos. Lo que encontré envolviendo el contenido de la barra lateral en scrollspy div debajo de la posición de la grilla.

Fuente

2012-11-20 17:16:42 cosmicdot

Me parece que si va a tener un componente de la página arreglado de todos modos, lo más fácil es sacar ese div de la grilla 'Fundación' por completo. Luego, fuera de la cuadrícula, puede ubicarlo como fixed y no interactuará con la red en absoluto. Si el menú en sí también necesita ser una cuadrícula flexible, conviértalo en uno, solo haga que se separe de la grilla principal.

Fuente

2012-03-21 08:57:09 Ian128K

Usar javascript para resolver un problema como este parece excesivo. Trataría de mantenerme en lo básico usando las clases de desplazamiento de Foundation como esta:

<div class="row twelve columns"> 
    <div class="two columns" style="position:fixed;top:0;bottom:0;overflow-x:hidden;overflow-y:auto;"> 
    Menu 
    <ul><li>Menu Item</li></ul> 
    </div> 
    <div class="ten columns offset-by-two"> 
    Content goes here 
    </div> 
</div>

Espero que esto ayude!

Fuente

2013-02-19 08:50:10 Marz

Esto no funcionará. Digamos que el tamaño de la pantalla es de 1200px. El ancho de página es 1000px. Si aplica una clase de columna a un elemento fijo que da, por ejemplo, un 10% de ancho, entonces el elemento fijo tendrá un ancho de '10% de 1200px = 120px'. Esto se debe a que los elementos con 'position: fixed' tienen su ancho calculado con respecto a la ventana gráfica, no los divs principales. Mientras que cualquier cosa que no sea una posición fija obtendrá un ancho de '10% de 1000px = 100px'. –

Usar una posición fija con un marco de diseño de cuadrícula

Respuesta

Cuestiones relacionadas