@enten/ngx-sticky

:warning: WIP

An Angular directive for making things sticky when the user scrolls (for Angular 2+) with no jQuery Dependency.

Requirements

• Angular (requires Angular 4.x or higher)
• Supports all major browsers and IE11 and up (lower versions might not be supported)

Features

• Stick all the things!
• Super smooth!
• Tested in real world projects
• Support for Angular Universal
• Prevents page-jumping when switching to sticky mode
• No jQuery or other dependencies - pure Angular solution
• Support for boundaries to make elements stop

Installation

with npm:

npm install @enten/ngx-sticky

with yarn:

yarn add @enten/ngx-sticky

Now import the NgxStickyModule in the corresponding Module

import { NgxStickyModule } from '@enten/ngx-sticky';

@NgModule({
  declarations: [
  ],
  imports: [
    NgxStickyModule,
  ],
  providers: [],
})
export class SomeModule { }

Usage

<div ngxSticky>
  I am sticky!
</div>

Showcases

| @enten/ngx-sticky | @angular/core | rxjs | |-|-|-| | 17.0.0 | ^17.0.0 | ^6.5.3 \|\| ^7.4.0 | | 16.0.0 | ^16.0.0 | ^6.5.3 \|\| ^7.4.0 | | 15.0.0 | ^15.0.0 | ^6.5.3 \|\| ^7.4.0 | | 14.0.0 | ^14.0.0 | ^6.5.3 \|\| ^7.4.0 | | 13.0.0 | ^13.0.0 | ^6.5.3 \|\| ^7.4.0 | | 12.0.0 | ^12.0.0 | ^6.5.3 \|\| ^7.0.0 | | 11.0.0 | ^11.0.0 | ^6.5.3 | | 10.0.0 | ^10.0.0 | ^6.5.3 | | 9.0.0 | ^9.0.0 | ^6.5.3 | | 8.0.0 | ^8.0.0 | ^6.4.0 | | 7.0.0 | ^7.0.0 | >=6.0.0 <6.4.0 | | 6.0.0 | ^6.0.0 | >=6.0.0 <6.4.0 |

Thanks to

• @w11k/angular-sticky-things

License

MIT