Tabla de contenidos fijos con estados activos de desplazamiento

 

 

 

Supongamos que tiene un diseño de dos columnas: una columna principal con contenido y una barra lateral. Digamos que tiene mucho contenido, con secciones que requieren desplazamiento. La columna de la barra lateral que está prácticamente vacía, de modo que puede colocar de forma segura una position: sticky;tabla de contenido allí para todo el contenido de la columna principal. Un patrón bastante común para la documentación.

Bramus Van Damme tiene un buen tutorial sobre todo esto, comenzando con el marcado semántico, implementando la mayor parte de la funcionalidad con HTML y CSS, y luego haciendo la última parte de mejora de la navegación activa con JavaScript.

Por ejemplo, si no hace clic en una sección (donde podría salirse con la suya con :targetel estilo para la navegación activa), JavaScript es necesario para indicar dónde se desplaza y seleccionar la navegación activa. Ese bit activo se maneja muy bien con IntersectionObserver, que es la API perfecta para esto.

 

Aquí está ese resultado:

Me recuerda una demostración muy similar de Hakim El Hattab a la que llamó Progress Nav. El patrón de diseño es exactamente el mismo, pero la versión de Hakim tiene esta ruta SVG ultra elegante que se dibuja a lo largo del camino, sangrando para la navegación secundaria. Insertaré un vídeo aquí:

Ese no usa IntersectionObserver, así que si quieres hackear esto, ¡combínalos!






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. La innovación no puede mantener la Web rápida
  2. Rendimiento web ultrarrápido
  3. “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario
  4. Utiliza esto

Tabla de contenidos fijos con estados activos de desplazamiento

Tabla de contenidos fijos con estados activos de desplazamiento

Supongamos que tiene un diseño de dos columnas: una columna principal con contenido y una barra lateral. Digamos que tiene mucho contenido, con secciones que

programar

es

https://pseint.es/static/images/programar-tabla-de-contenidos-fijos-con-estados-activos-de-desplazamiento-1188-0.jpg

2024-06-13

 

Tabla de contenidos fijos con estados activos de desplazamiento
Tabla de contenidos fijos con estados activos de desplazamiento

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences