Creé una tabla de contenido dinámica pero no puedo encontrar una manera de agregarle estados activos de desplazamiento. ¿Cómo puedo rastrear todos los encabezados H2 que tienen una id aplicada y resaltarlos al desplazarme? ¿Alguien puede ayudarme con esto?

Gracias.

 const content = unified() .use(rehypeParse, { fragment: true, }) .use(() => { return (tree) => { visit(tree, 'element', (node) => { if (node.tagName === 'h2' ) { const id = parameterize(node.children[0].value); node.properties.id = id; toc.push({ id, title: node.children[0].value }); node.children.unshift({ type: 'element', tagName: 'a', properties: { href: `#${id}`, } }) } }) } }) .use(rehypeStringify) .processSync(post.content) .toString();