ngx-sticky-plus v0.0.3

ngx-sticky-plus

An Angular 2+ directive that emits an event when an element that has position: sticky became sticky and optionally adds a CSS class. This enables developers to add special styling e.g a box-shadow when element becomes sticky. Described functionality is currently not supported natively by browsers.

Demo

Features

• 🦈 Very performant (using IntersectionObserver instead of scroll event)
• 🐑 Supports top / bottom stickyness
• 🐧 Supports sticky elements within scroll containers

Disclaimer

This is not a polyfill for position: sticky. If the browser does not support position sticky, then also this library will do nothing.

Side Effects

There are two side effects that you should be aware of:

• The library adds position: relative to the parent element of the sticky element
• The library adds two invisible elements to the parent element of the sticky element

This is required for the approach that was taken here. If you want to read more about this approach i recomment to read this blog post by Google that inspired this library.

Getting Started

Install the package with npm

npm install ngx-sticky-plus

or use yarn

yarn add ngx-sticky-plus

then add the lib module to your app or feature module:

import { NgxStickyPlusModule } from "ngx-sticky-plus";

@NgModule({
  declarations: [],
  imports: [NgxStickyPlusModule],
  providers: [],
})
export class AppModule {}

Now you can use the directive inside your templates:

<header style="position: sticky; top: 0" (stickyPlus)="someFn($event)"></header>

API

Roadmap

• Support Angular Universal
• Have decent test coverage

License

Distributed under the MIT License. See LICENSE for more information.

Acknowledgements

• This lib is inspired by a Google Blog Post