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!