ngx-sticky

Angular sticky boxes

Description

Angular attribute directive for the creation of sticky boxes in the web-pages of your applications. Compatible Angular4+.

This directive will have a result similar to the CSS3 property position: sticky but it also allows to set sticky boxes in respect to the bottom baseline of the view.

Installation

To install this component to an external project, follow the procedure:

1. npm install ngx-sticky --save

2. Add NgxStickyModule import to your @NgModule like example below

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

    import { NgxStickyModule } from 'ngx-sticky';

    import { MyTestApp } from './my-test-app';

    @NgModule({
        imports: [ 
          BrowserModule,
          NgxStickyModule 
        ],
        declarations: [ MyTestApp ],
        bootstrap:    [ MyTestApp ]
    })
    export class MyTestAppModule {}

Usage

Apply the appSticky directive to your HTML tags and use the following attributes to manage its options.

    <div appSticky position="top" margin="50" id="myElement"> </div>

Attributes

| Option | Default | Type | Description | | :------------- | :------------- | :---------- | :---------- | | position | 'top' | string | Position of reference for the sticky. top: the element will stick in respect to the top line. bottom: the element will stick in respect to the bottom line. | | margin | 0 | number | Number of pixel for the element margin in respect of the reference position while it is sticky. |

Compatibility (tested with)

• Firefox (latest)
• Chrome (latest)
• Edge
• IE10
• Safari

License

• License: MIT

Author

• Author: barbared

Keywords

• sticky
• Angular2+
• typescript