Angular Directive That Adds Sticky Position To An HTML Element

Angular ngx sticky Directive which adds a fixed position of an HTML element and also applies and removes a custom class when the element is fixed in position.

how to add and remove class in angular, angular add/remove class dynamically, add remove class onclick, add and remove class in javascript, onclick add and remove class to div

How to Create a Sticky Scrolling with jQuery Plugin | Jquery.smartSticky

How to make use of it:

Install ngx-sticky-directive:

# using npm
npm install ngx-sticky-directive --save

# using yarn
yarn add ngx-sticky-directive

Import the installed library:

import { StickyDirectiveModule } from 'ngx-sticky-directive';

  imports: [
export class AppModule { }

Use it in your component.

  selector: 'dummy-component',
  styles: [
      .body-container {
        background-color: yellow;
        height: 2000px;
        overflow: scroll;
        padding: 10px;

      .super-height {
        background-color: black;
        height: 5000px;
        position: relative;
        width: 100%;

      #sticky-component {
        background-color: green;
        height: 50px;
        width: 100%;
        top: -10px;
        z-index: 10;

      .when-sticky {
        background-color: magenta !important;
  template: `
    <div class="body-container" #scCont>
      <div id="trigger-on" class="super-height"></div>
class DummyComponent {}


`@Input() scrollContainer: stringElementRef
`@Input() triggerOn: stringElementRef
@Input() debugMode: booleanDisplay or hide the sentinel element.
@Input() classWhenSticky: stringCSS class to be added to the target element when becomes sticky.
@Input() zIndex: number = 10CSS zIndex value to set to the target element. By default is 10.
@Input() top: number = 0CSS top value to set to the sticky element. By default is 0.

Add & Remove CSS Classes When Elements Is Sticky, ngx-sticky-directive Plugin/Github, add class using javascript, remove class using javascript

See Demo And Download

Official Website(bikecoders): Click Here

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

Related Posts


Adding Zoom-on-Wheel and Pan-on-Drag to Inline SVG Elements

Vanilla-js module for adding zoom and panning behavior when dragging to SVG embedded elements. A lightweight Vanilla JavaScript plugin that enables zoom and pan functions on an…


Sorting HTML Table Vanilla JavaScript Library | Sortable.js

Sortable – Small JS vanilla table sorter makes any table with class = “sortable“, er, sortable. That is, the user can click the table header and change…


WYSIWYG Rich Text Editor With jQuery And FontAwesome | RichText

RichText jQuery implementation for WYSIWYG Rich Text Editor which uses Font Awesome Iconic Font for editor icons. It is licensed under AGPL-3.0. Initialize editor Simply call .richText() on your jQuery(‘textarea’) or jQuery(‘input’)…


[Autocomplete] Email Domain Suggestions Like Gmail, Outlook, or More | email-genie

Email Genie allows auto-completion in the email field by providing a list of domain suggestions (,, etc.). This package is lightweight, flexible, compatible with libraries (jQuery,…


[Generator] JavaScript Library for Creating Squircley Magic ✨ | squircley.js

squircley.js is the core magic of Squirclular ✨ from wrapped in a simple 0-dependency JavaScript library. squircley.js can generate SVG files, add square backgrounds to DOM…