Подсвечивать пункты меню при скроле

Пример кода, чтобы подсвечивать активные пункты меню.

<nav id="menu">
  <ul>
    <li><a href="#content-1">Контент 1</a></li>
    <li><a href="#content-2">Контент 2</a></li>
    <li><a href="#content-3">Контент 3</a></li>
  </ul>
</nav>

<div data-bs-spy="scroll" data-bs-target="#menu" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true">
  <h2 id="content-1">Контент 1</h2>
  <p>...</p>
  <h2 id="content-2">Контент 2</h2>
  <p>...</p>
  <h2 id="content-3">Контент 3</h2>
  <p>...</p>
</div>

Стоит обратить внимание на data-bs-smooth-scroll="true". Она позволяет плавно прокручиваться до указанного заголовка.

Результат: