Awesome
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 { }