Угловое изменение активной навигационной ссылки при прокрутке

Question

В настоящее время я работаю над одностраничным пейджером с помощью начальной загрузки. Так как я не знаю способ прокрутки до идентификаторов определенных div с помощью routerLink, я использую href=#id, который до сих пор работал нормально. В настоящее время я пытаюсь, что onWindowScroll класс active должен поменять его владельца в соответствии с текущим div, который отображается.

Таким образом, когда пользователь, например, прокручивает до about, класс active должен быть присвоен ассоциированному nav-link, который в этом случае, очевидно, равен about us.

@HostListener('document:scroll', [])
  onWindowScroll() {

  }

<div class="container-fluid">
  <a class="nav-link logo float-left" href="#">peak design</a>
  <ul class="nav justify-content-end">
    <li class="nav-item">
      <a class="nav-link active" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#about">About us</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Our work</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact us</a>
    </li>
  </ul>
</div>