Press "Enter" to skip to content

AngularJS Directive Sticky Things When The User Scrolls

Angular Sticky Things is an Angular directive to make things sticky when the user scrolls (for Angular 2+) without a jQuery dependency.

ngx sticky, sticky div in angular, angular sticky toolbar, angular 8 sticky on scroll, sticky not working angular, angularjs sticky, scroll then fix content angular, angular sticky button


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


  • Stick all the things!
  • Super smooth!
  • Tested on real projects
  • Angular Universal support
  • Prevents page jumping when switching to static mode
  • No jQuery or other dependencies – pure angular solution

Highly Customizable Sticky Element Plugin With JavaScript | HC-Sticky

How to make use of it:


npm install @w11k/angular-sticky-things
yarn add @w11k/angular-sticky-things

1. Now import the AngularStickyThingsModule in the corresponding Module:

import {AngularStickyThingsModule} from '@w11k/angular-sticky-things';

  declarations: [
  imports: [
  providers: [],
export class SomeModule { }

2. Usage

<div #spacer></div>
<div stickyThing [spacer]="spacer">
  I am sticky!

Sticky Anything Directive For Angular, angular npm sticky things

See Demo And Download

Official Website(w11k): Click Here

This superior jQuery/javascript plugin is developed by w11k. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.