NgxScrollSpy

Angular scroll spy library

An Angular library that can automatically spy the position of elements (inside a scrollable container) and emit the currently active (visible) element in the viewport (add and remove the spyActiveClass, default: active).

Features:

• Works for nested and dynamically added and removed (*ngIf) elements.
• Supports multiple scroll-spies.
• Supports window resizing.

View the demo

Installation

npm install @thejlifex/ngx-scroll-spy --save

Step 01: Import the SpyDirective and SpyTargetDirective to your module (or to your standalone component).

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { SpyDirective, SpyTargetDirective } from '@thejlifex/ngx-scroll-spy';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,

    SpyDirective,
    SpyTargetDirective

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 02: Add the spy directive.

app.component.html

<nav>
  <a spy [spyTargetId]="'home'">Home</a>
  <a spy [spyTargetId]="'features'">Features</a>
  <a spy [spyTargetId]="'pricing'">Pricing</a>
</nav>

Step 03: Add the spyTarget directive.

app.component.html

<section spyTarget [spyTargetId]="'home'">Home</section>
<section spyTarget [spyTargetId]="'features'">Features</section>
<section spyTarget [spyTargetId]="'pricing'">Pricing</section>

Step 04: Hightlight the active nav link.

app.component.scss

nav a.active {
  color: blue;
}

Documentation

SpyDirective (spy)

Spies on the spyTarget that has the provided spyTargetId. | @Input() | Type | Required | Default | Description | |---|---|---|---|---| | spyTargetId | string | yes | none | ID of the spyTarget to spy. | | spyTargetContainerId | string | optional | none | ID of the spyTargetContainer containing the spyTarget. | | spyActiveClass | string | optional | 'active' | Class name to add to this element when the spyTarget has transitioned into a state of intersection (is visisble). |

SpyTargetDirective (spyTarget)

Adds this element as spy-target and starts to observe this target. Automatically removes this element as spy-target and stops observing this target when the element is destroyed. | @Input() | Type | Required | Default | Description | |---|---|---|---|---| | spyTargetId | string | yes | none | ID for this spyTarget. | | spyTargetContainerId | string | optional | none | ID for the spyTargetContainer containing this spyTarget. |

SpyTargetContainerDirective (spyTargetContainer)

Creates a scroll-spy on this spy targets container (element). Automatically destroys the scroll-spy when the element is destroyed.

This is useful:

• when you have multiple (independent) scrollable elements on the same page,
• or the scrollable element on your page is not the browser default scrollable element, for example <mat-sidenav-content> if you are using Angular Material Sidenav

where you want to have a scroll-spy.

| @Input() | Type | Required | Default | Description | |---|---|---|---|---| | spyTargetContainerId | string | yes | none | ID for this spyTargetContainer. |

Usage with additionally a spyTargetContainer.

Step 01: Import additionally the SpyTargetContainerDirective to your module (or to your standalone component).

import { ..., SpyTargetContainerDirective } from '@thejlifex/ngx-scroll-spy';

...

imports: [
  ...
  SpyTargetContainerDirective
]

Step 02: Add the spyTargetContainer directive.

app.component.html

<nav>
  <a spy [spyTargetId]="'home'" [spyTargetContainerId]="myContainerId">Home</a>
  ...
</nav>

<div spyTargetContainer [spyTargetContainerId]="myContainerId">
  <section spyTarget [spyTargetId]="'home'"  [spyTargetContainerId]="myContainerId">Home</section>
  ...
</div>

License

MIT