CSS: barra lateral con posición fija cortada

Question

Mi sitio web tiene una barra lateral con muchas cosas, tanto que la ventana del navegador debe tener una altura de al menos 1020 píxeles para ver todo sin tener que desplazarse (a menos, por supuesto, que se aleje).

Me gustaría que la posición de la barra lateral se fije para que cuando se encuentre en una página con mucho contenido, la barra lateral permanezca en la misma posición que se desplaza. Esto fue muy fácil de implementar:

div#Sidebar { 
    position: fixed; 
} 

Esto funciona bien en mi equipo, siempre y cuando el navegador se maximiza porque mi monitor está funcionando a 1920 x 1200. Pero si cambio el tamaño de la ventana del navegador, la barra lateral se corta . A medida que me desplazo por el contenido de la página, puedo ver todo el contenido de la página, pero la barra lateral permanece cortada debido a que se repara su posición. Por lo que parece que sólo tiene dos opciones:

1. que la posición de la barra lateral no es fijo (malo), pero permiten que los usuarios puedan ver la totalidad de la barra lateral (bueno).

2. Ajuste la posición de la barra lateral (buena), pero no permita que los usuarios puedan ver toda la barra lateral (mala).

¿Hay alguna manera de combinar estas dos opciones?

Answer 1

Puede hacer una prueba en javascript. Ya sea en javascript puro o con jQuery (sería mucho más fácil).

He aquí un ejemplo para jQuery:

$(window).resize(function() { 
    if ($(window).height() < 800) { 
    $('#Sidebar').addClass('beAbsolute').removeClass('beFixed'); 
    } else { 
    $('#Sidebar').addClass('beFixed').removeClass('beAbsolute'); 
    } 
}); 

CSS:

.beFixed {position:fixed;} 
.beAbsolute {position:absolute;top:0px;} 

Por defecto, utilice la versión absoluta, por lo que el usuario puede ver sin JavaScript toda la barra lateral.

Answer 2

Pruebe overflow-y:auto y tape la talla. Recomiendo encapsularlo como algo más pequeño que 1020 píxeles, porque mucha gente se está ejecutando en pantallas más pequeñas (mi portátil de 15 ", por ejemplo, es 1366x768, así que solo podría ver aproximadamente 3/4) e incluso aquellos en pantallas más grandes no necesariamente maximizan sus ventanas. No probado, pero height:100% podría/debería funcionar

Se agregará una barra de desplazamiento al propio div, así que asegúrese de dar cuenta de eso, pero hará que el div se pueda desplazar , lo que resolverá su problema. Se sacrifica un poco la usabilidad (sin embargo, las barras de desplazamiento distintas a la ventana principal generalmente son mal vistas)