Awesome Open Source
Awesome Open Source

ngx-sticky

Angular sticky boxes

npm npm

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
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (254,498
Angular (54,879
Position (8,530
Ngx (2,520
Margin (2,460
Sticky Elements (57