Add Table of Content to Static HTML with scrolling active states in Next.js

Question

I created a dynamic table of contents but cannot find a way to add scrolling active states to it. How can I track all H2 heading that has an id applied and highlight them when scrolling ? Anyone can help me with this?

Thank you.

  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();