Angular Directive To Make Things Sticky When The User Scrolls

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

angular 8 sticky things on scroll, sticky change event, angular sticky things, angular sticky component on scroll, ngx sticky, sticky image on scroll, angular scrolling banner


  • Stick all things!
  • Super soft!
  • 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:


with npm:
npm install @w11k/angular-sticky-things

with yarn:
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!

Angular Sticky Things Directive Plugin/Github

See Demo And Download

Official Website(w11k): Click Here

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

Related Posts


[Icon Picker] Iconpicker for Bootstrap 5 Icons Library

Bootstrap 5-based icon picker which supports any icon libraries like Bootstrap Icons, Font Awesome[], etc. Must Read: 1000+ Pixel Perfect SVG Icons For Vue Components | Unicons How…


Bootstrap Multiple Image Upload with Preview and Delete | ImagesLoader

ImagesLoader is a standard bootstrap image upload plugin that provides an easy-to-use and nice-looking interface for uploading multiple images to a web server. Must Read: HTML 5…


A Lightweight jQuery Plugin for Animating Split-Flap Displays | fallblatt

fallblatt is a lightweight jQuery plugin for animating split screens. This jQuery plugin allows you to include such offers in your web application. Everything from virtual departure…


Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…


jQuery Plugin for Countdown Timer on HTML Page | SyoTimer

yoTimer jQuery plugin allows you to create digital style countdowns/periodic timers on the webpage, with callbacks support and timezone/translation customization. Features Periodic count with the specified period…


Dynamic, Data-driven Periodic Table built with Vue.js

Periodicity is a dynamic, data-driven periodic table created with Vue.js that uses D3 animations and graphs to show the beauty of periodic trends. Built With vue.js (component…