@thejlifex/ngx-scroll-spy

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