6.1.0 • Published 5 years ago

ng2-sticky-kit v6.1.0

Weekly downloads
1,215
License
MIT
Repository
github
Last release
5 years ago

Angular Sticky

Angular Sticky (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.

Supports Angular+ versions

NPM

Install with npm:

npm install ng2-sticky-kit --save

Initial development environment:

npm install
npm run build

Run demo application:

npm run serve

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 'ng2-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 { }

If you are using system.js, don't forget to add 'ng2-sticky-kit' to your list of packages.

6.1.0

5 years ago

6.0.0

5 years ago

5.3.0

6 years ago

5.2.1

6 years ago

5.2.0

6 years ago

5.1.4

6 years ago

5.1.3

6 years ago

5.1.2

6 years ago

5.1.1

6 years ago

5.1.0

6 years ago

5.0.0

7 years ago

4.1.3

7 years ago

4.1.2

7 years ago

4.1.1

7 years ago

4.1.0

7 years ago

4.0.1

7 years ago

4.0.0

7 years ago

2.0.3

7 years ago

2.0.2

7 years ago

2.0.1

7 years ago

2.0.0

7 years ago

1.1.0

7 years ago

1.0.7

8 years ago

1.0.6

8 years ago

1.0.5

8 years ago

1.0.4

8 years ago

1.0.3

8 years ago

1.0.2

8 years ago

1.0.1

8 years ago

1.0.0

8 years ago