CngxScrollSpy

Tracks which section is currently most visible in the viewport.

Observes a list of elements by their IDs using IntersectionObserver and reports the one with the highest intersection ratio as the active section. Ideal for scroll-based navigation highlighting and reading progress.

Section IDs are resolved when the inputs change - sections rendered later (@if/@defer) are not picked up automatically; re-bind [cngxScrollSpy] once they exist. In dev mode the directive warns about IDs it cannot find.

Navigation highlighting#

<nav [cngxScrollSpy]="['intro', 'features', 'pricing']"
     #spy="cngxScrollSpy">
  <a [class.active]="spy.activeId() === 'intro'" href="#intro">Intro</a>
  <a [class.active]="spy.activeId() === 'features'" href="#features">Features</a>
  <a [class.active]="spy.activeId() === 'pricing'" href="#pricing">Pricing</a>
</nav>

<section id="intro">…</section>
<section id="features">…</section>
<section id="pricing">…</section>

https://cngxjs.github.io/cngx/examples/#/common/layout/scroll-spy/scroll-based-navigation