Angular sticky directive using Stickybits, a lightweight alternative to position: sticky polyfills.

⏰ The project is still a Work-In-Progress and may be subject to major changes.

• Installation
• Configuration
• Usage
• Browser Compatibility
• Quirks
• Demo application
• Road map
• Contribution

To add ngx-stickybits library to your package.json use the following command.

npm install ngx-stickybits --save

Import StickybitsModule to your angular module to be able to use stickybits directive.

import { NgModule } from '@angular/core';
+ import { StickybitsModule } from 'ngx-stickybits';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
+   StickybitsModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule { }

ngx-stickybits provides the stickybits directive to apply on element you want to be sticky.

<div class="some-stickybits-parent">
  <div class="some-stickybits-element" stickybits>
    I am a sticky element
  </div>
</div>

stickybits directive can be customized using the following properties:

⚠️ Right now events are only emitted when useStickyClasses is set to true as those are based on CSS class detection with MutationObserver which offers better browser compatibility then IntersectionObserver althought refactoring might be reconsidered in the future.

When useStickyClasses is set to true, the following CSS classes will be applied on elements (can be can be overwritten):

• sticky if the selected element is sticky
• stuck if the selected element is stopped at the bottom of its parent
• sticky--change if the selected element is scrolling within the height of the sticky element (before it get sticky)
• sticky-parent so that styles can easily be added to the parent of a sticky element

Stickybits works in modern browsers like a charm, when it turns to Internet Explorer it is often a total different story! Althought it tend to support IE 9 and above by using position: fixed the result not always what is expected. Please file and issue with browser compatibility quirks here.

I won't lie to you, getting an element sticky has always been a hard and painful task! Although Stickybits makes it easier it is not always magic and sometime require some twists to make it works as desired. This section is dedicated to quirks and how to resolve common problematic behaviors using stickybits directive.

Setting [verticalPosition]="'bottom'" won't work out of the box, easiest way to fix it is to put the sticky parent element with display: flex and set the sticky element with align-self: flex-end.

Demo application is available @ https://jfcere.github.io/ngx-stickybits and its source code can be found inside the demo directory.

The following commands will clone the repository, install npm dependencies and serve the application @ https://localhost:4200

git clone https://github.com/jfcere/ngx-stickybits.git
npm install
ng serve

Here is the list of tasks that will be done on this library in a near future ...

• Publish demo on github pages
• Improve documentation
• Add CircleCI integration
• Add unit tests
• Add Module configuration (CSS classes, useFixed, noStyles, ...)

Contributions are always welcome, just make sure that ...

• Your code style matches with the rest of the project
• Unit tests pass
• Linter passes

I do not own rights for Stickybits and all the credits belong to them — see DollarShaveClub/Stickybits for details.

This package is licensed under MIT license — see LICENSE file for details.