Hacer elemento de posición fija, pero seguir la página de desplazamiento si el contenido es demasiado grande

Question

Ver this webpage.

1. Primero intente desplazarse, verifique que la barra izquierda permanezca fija.
2. Cambia el tamaño de la altura de la ventana para que no todo el contenido de la barra izquierda esté visible. Ahora desplácese. Esta vez, la barra izquierda no está fija.

En esta página, hay un jquery que calcula la altura de la barra izquierda, la compara con la altura de la ventana y luego hace la posición de la barra izquierda fija o absoluta.

Sin embargo, me pregunto si algo similar se puede lograr con solo HTML y CSS, sin utilizar jQuery o similar.

¿Alguna sugerencia? En resumen, lo que estoy buscando es una barra con contenido que permanezca fijo, pero se desplaza si el contenido se desborda. Pero el desplazamiento debe estar junto con toda la página.

Answer 1

Puede usar consultas de medios para dirigir CSS en ciertos tamaños de pantalla (y otras cosas también) para que pueda usar una hoja de estilos si la pantalla es demasiado pequeña. No soy un experto así que no hay ejemplos, pero mira aquí http://css-tricks.com/css-media-queries/. ¡Lo siento! pero supongo que lo imaginó :)

Editar: El resultado de trabajo es la siguiente:

#leftnav { 
    /* default look */ 
    width: 300px; 
    position: fixed; 
    top:0; 
    height: 100%; 
} 

/* set the size at which the content is clipped and we cannot have fixed position */ 
@media all and (max-height: 500px) { 
    /* things inside here will only have an effect if the browser window shows 
     less than 500 px in the height, so here I apply the special rules */ 
    #leftnav { 
     position: absolute; 
     height: auto; 
     /* etc.. */ 
    } 
}