ng6-sticky v1.0.7

ng6-sticky

Angular 6+ Directive for sticky behaviour on any element

Installation

To install this library, run:

npm install --save ng6-sticky

Usage

Basic

Import library to your Angular App in AppModule:

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

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

// Import NgxStickyModule
import { NgxStickyModule } from 'ng6-sticky';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    NgxStickyModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once imported, use the directive as follows:

<div ngx-sticky>
  <div>sticky content</div>
</div>

Advanced optional parameters

<div ngx-sticky [offSet]="100" [addClass]="'custom-class'" [useParentOffset]="true">
  <div>sticky content</div>
</div>

offset defines an offset in px from window top, default is 0

addClass allows you to add a custom class when sticky is triggered

useParentOffset set the offset equal to a parents element offset, default is false (overrides offset)

Demo on Stackblitz

Demo Page

Demo Code

License

MIT © 2018 Patrick Jominet

Based on the work of ng-sticky