Tabla de contenidos con IntersectionObserver

Si tiene una tabla de contenido en una página de desplazamiento largo, gracias, por ejemplo, a position: fixed;o position: sticky;, la IntersectionObserverAPI en JavaScript es el compañero perfecto para resaltar elementos en la tabla de contenido cuando el contenido correspondiente está a la vista.

Ben Frain tiene una publicación sobre esto:

Gracias a IntersectionObserver tenemos un fragmento de código pequeño pero muy eficiente para crear nuestra tabla de contenido, proporcionar enlaces rápidos para recorrer el documento y actualizar a los lectores sobre dónde se encuentran en un documento mientras lo leen.

En comparación con técnicas más antiguas que necesitan vincularse a eventos de desplazamiento y realizar sus propios cálculos, este código es más corto, más rápido y más lógico. Si está buscando la demostración en el sitio de Ben, el artículo es la demostración. Y aquí tenéis un vídeo sobre ello:

He mencionado estas cosas antes, pero aquí hay una versión de Bramus Van Damme:

Y aquí hay una versión de Hakim el Hattab que simplemente está pidiendo a alguien que la transfiera IntersectionObserverporque la interfaz de usuario es genial: