Angular2 Sticky Directive

Angular2 Sticky Directive (no jQuery is required) makes HTML elements sticky. For instance, the header, the menu, the sidebar or any other block can be stuck at the desired position.

NPM

Install with npm:

npm install ng2-sticky-kit

Run demo application:

npm run lite-server

Usage

[sticky] - makes an element sticky

<div [sticky]>Sticky element</div>

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

<div [sticky] [sticky-zIndex="999"]>Sticky element</div>

[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

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

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

<div [sticky] [sticky-start="20"]>Sticky element</div>

[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

import {Component} from '@angular/core';
import {Sticky} from 'ng2-sticky/ng2-sticky';

@Component({
  selector: 'app',
  template: '<div [sticky]>demo</div>',
  directives: [
    Sticky
  ]
})
export class DemoComponent { }