Tengo una página con un encabezado principal estático, un encabezado adhesivo que abarca la página y, debajo, una barra lateral adhesiva. En la parte inferior hay un pie de página que también abarca la página. La barra lateral en sí puede tener una barra de desplazamiento. Ver ejemplo de Codepen .

 +---------------------------------------------------------------------+ | static main header | +---------------------------------------------------------------------+ | sticky subheader | |---------------------------------------------------------------------| | content area | sidebar | | content area | sidebar | | content area | sidebar | | content area | sidebar | | content area | sidebar | |---------------------------------------------------------------------| | static footer | +---------------------------------------------------------------------+

Quiero que tanto la parte superior como la inferior de la barra lateral estén siempre dentro de la ventana gráfica.

Cuando estoy en la parte superior del documento, la parte superior de la barra lateral aparece debajo del subtítulo adhesivo. La parte inferior de la barra lateral puede extenderse como máximo hasta el borde inferior de la ventana gráfica.

Cuando me desplazo hacia abajo lo suficiente como para que el pie de página entre en la ventana gráfica, quiero que la altura máxima de la barra lateral se reduzca para que la parte superior de la barra lateral no pueda ser empujada hacia arriba más allá del borde inferior del subtítulo pegajoso.

Para hacer esto, parece que necesito usar al menos un controlador de desplazamiento y un controlador de eventos de cambio de tamaño. Sin embargo, creo que debe haber una forma más sólida y eficaz de lograr lo que quiero.

Esto no se muestra en mi ejemplo simple de Codepen, pero en mi caso de uso real, cuando llego al final de la página, hay un breve problema visual cuando la altura máxima es brevemente más alta de lo que debería ser, y la parte superior de la la barra lateral se empuja hacia arriba por encima del borde inferior del subtítulo adhesivo. Luego se aplica la nueva altura máxima y la barra lateral se reduce repentinamente para ajustarse, como se desee.

¿Cómo puedo hacer esto mejor? ¿Quizás un uso creativo de ResizeObserver o IntersectionObserver ?