Una barra lateral adhesiva de tamaño dinámico con HTML y CSS

Crear contenido de página que se adhiera a la ventana gráfica a medida que se desplaza, algo así como un menú de salto o encabezados de sección, nunca ha sido tan fácil. Agregue un position: stickya su conjunto de reglas CSS, establezca el desplazamiento direccional (por ejemplo top: 0, ) y estará listo para impresionar a sus compañeros de equipo con el mínimo esfuerzo. Consulte este artículo de CSS-Tricks para ver algunos casos de uso de posicionamiento adhesivo realmente sofisticados.

Pero el posicionamiento fijo puede resultar un poco complicado, especialmente cuando se trata de altura y la peligrosa situación de ocultar contenido en una posición a la que no se puede desplazar. Déjame preparar el escenario y mostrarte el problema y cómo lo solucioné.

Recientemente trabajé en un diseño de escritorio con el que todos estamos familiarizados: un área de contenido principal con una barra lateral al lado. Esta barra lateral en particular contiene elementos de acción y filtros que son pertinentes al contenido principal. A medida que se desplaza la sección de la página, este componente permanece fijo en la ventana gráfica y accesible contextualmente.

El estilo del diseño fue tan fácil de implementar como mencioné anteriormente. Pero había un problema: la altura del componente variaría según su contenido. Podría haberlo tapado con un max-heighty configurarlo overflow-y: autopara que el contenido del componente sea desplazable. Esto funcionó bien en la pantalla de mi computadora portátil y en la altura típica de mi ventana gráfica, pero en una ventana gráfica más pequeña con menos espacio vertical, la altura de la barra lateral excedería la ventana gráfica.

Ahí es donde las cosas se pusieron complicadas.

Pensando en soluciones

Inicialmente consideré recurrir a una consulta de los medios. Quizás podría usar una consulta de medios para eliminar la posición adhesiva y hacer que el componente se asiente en relación con la parte superior del contenedor de la barra lateral. Esto otorgaría acceso a la totalidad de su contenido. De lo contrario, al desplazarme por la página, el contenido del componente adhesivo se corta en la parte inferior de la ventana gráfica hasta que llego al final de su sección principal.

Entonces recordé que la altura del componente adhesivo es dinámica.

¿Qué valor mágico podría usar para mi consulta de medios que manejaría tal cosa? ¿Quizás en su lugar podría escribir una función de JavaScript para comprobar si el componente fluye más allá de los límites de la ventana gráfica al cargar la página? Entonces podría actualizar la altura del componente…

Esa era una posibilidad.

¿Pero qué pasa si el usuario cambia el tamaño de su ventana? ¿Debería usar esa misma función en un controlador de eventos de cambio de tamaño? Eso no se siente bien. Debe haber una mejor manera de construir esto.

¡Resulta que sí lo hubo e implicó algunos trucos de CSS para hacer el trabajo!

Configurar la sección de la página

Comencé con una flexvisualización en el elemento principal. flex-basisSe estableció un valor en la barra lateral para un ancho de escritorio fijo. Luego, el elemento del artículo llenó el resto del espacio de la ventana gráfica horizontal disponible.

Si tiene curiosidad sobre cómo conseguí que los dos contenedores se apilaran para ventanas gráficas más pequeñas sin una consulta de medios, consulte el truco The Flexbox Holy Albatross .

Agregué align-self: starta la barra lateral para que su altura no se extendiera con el artículo principal ( stretch es el valor predeterminado). Esto le dio a mis propiedades de posicionamiento la capacidad de lanzar su magia:

.sidebar {  --offset: var(--space);  /* ... */  position: sticky;  top: var(--offset);}

¡Mira eso! Con estas dos propiedades CSS, el elemento de la barra lateral se adhiere a la parte superior de la ventana gráfica con un desplazamiento para darle un respiro. Observe que el topvalor está establecido en una propiedad personalizada de CSS con ámbito . La --offsetvariable ahora se puede reutilizar en cualquier elemento secundario dentro de la barra lateral. Esto será útil más adelante al configurar la altura máxima del componente de la barra lateral adhesiva.

Puede encontrar una lista de declaraciones de variables CSS globales en la demostración de CodePen , incluida la --spacevariable utilizada para el valor de compensación en el :rootconjunto de reglas.

La barra lateral pegajosa

Tenga en cuenta que el componente en sí no es lo pegajoso; es la barra lateral misma. Por lo general, los padres deben encargarse del diseño y la ubicación generales. Esto le da al componente más flexibilidad y lo hace más modular para su uso en otras áreas de la aplicación.

Profundicemos en la anatomía de este componente. En la demostración , eliminé las propiedades decorativas siguientes para centrarme en los estilos de diseño:

.component {  display: grid;  grid-template-rows: auto 1fr auto;}
.component .content {  max-height: 500px;  overflow-y: auto;}

• Este componente utiliza CSS Grid y la idea de pila de panqueques de 1-Line Layouts para configurar las filas de esta plantilla. Tanto el encabezado como el pie de página ( auto) se ajustan a la altura de sus hijos mientras que el contenido ( 1fr, o una unidad de fracción ) llena el resto del espacio vertical abierto.
• Una max-heighten el contenido limita el crecimiento del componente en tamaños de pantalla más grandes. Esto es innecesario si se prefiere que el componente se estire para llenar la altura de la ventana gráfica.
• overflow-y: autopermite desplazarse por el contenido cuando sea necesario.

Cuando el componente se utiliza en la barra lateral, max-heightse necesita a para que no exceda la altura de la ventana gráfica. El --offsetalcance previo de la .sidebarclase se duplica para crear un margen en la parte inferior del elemento que coincide con el desplazamiento superior de la barra lateral adhesiva:

.sidebar .component {  max-height: calc(100vh - var(--offset) * 2);}

¡Esto concluye el ensamblaje de este componente adhesivo de la barra lateral! Después de que se aplicaron algunos estilos decorativos, este prototipo quedó listo para ser probado y revisado. ¡Darle una oportunidad! Abra la demostración en CodePen y haga clic en los elementos de la cuadrícula para agregarlos a la barra lateral. Cambie el tamaño de la ventana de su navegador para ver cómo el componente se flexiona con la ventana gráfica mientras permanece a la vista mientras se desplaza por la sección de contenido principal.

---

Este diseño puede funcionar bien en un navegador de escritorio, pero no es del todo ideal para dispositivos más pequeños o anchos de ventana gráfica. Sin embargo, el código aquí proporciona una base sólida que facilita agregar mejoras a la interfaz de usuario.

Una idea simple: se podría colocar un botón en la ventana gráfica que, al hacer clic, salte la página al contenido de la barra lateral. Otra idea: la barra lateral podría ocultarse fuera de la pantalla y un botón de alternancia podría deslizarla desde la izquierda o la derecha. La iteración y las pruebas de usuario ayudarán a impulsar esta experiencia en la dirección correcta.