ngx-sticky-kit

Angular Sticky makes HTML elements sticky. For instance, the header, the menu, the sidebar or any other block can be stuck at the desired position.

Installation

Install with npm:

npm install ngx-sticky-kit --save

Initial development environment:

npm install
npm run build

Run demo application:

npm start

Usage

[sticky] - makes an element sticky

<sticky>Sticky element</sticky>
<div sticky>Sticky div</div>

[sticky-orientation] : (default "none") - orientation for sticky element ("left", "right", "none")

[sticky-zIndex] : (default 10) - controls z-index CSS parameter of the sticky element

<sticky sticky-zIndex="999">Sticky element</sticky>

[sticky-width] : (default "auto") - width of the sticky element

[sticky-offset-top] : (default 0) - pixels between the top of the page or container and the element

[sticky-offset-bottom] : (default 0) - pixels between the bottom of the page or container and the element

<sticky sticky-offset-top="20" sticky-offset-bottom="20">Sticky element</sticky>

[sticky-start] : (default 0) - position where the element should start to stick

<sticky sticky-start="20">Sticky element</sticky>

[sticky-class] : (default "sticky") - CSS class that will be added after the element starts sticking

[sticky-end-class] : (default "sticky-end") - CSS class that will be added to the sticky element after it ends sticking

[sticky-media-query] : (default "") - media query that allows to use sticky

[sticky-parent] : (default true) - if true, then the sticky element will be stuck relatively to the parent containers. Otherwise, window will be used as the parent container.

NOTE: the "position: relative" styling is added to the parent element automatically in order to use the absolute positioning

Example

// app.module.ts
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {StickyModule} from 'ngx-sticky-kit';
import {AppComponent} from './app.component';

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

// app.component.ts
import {Component} from '@angular/core';

@Component({
  selector: 'app',
  template: '<sticky [sticky-offset-top]="20"><div>demo</div></sticky>',
})
export class DemoComponent { }