@thejlifex/ngx-scroll-spy v0.0.2
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