ngx-many-sticky

DEMO: https://stackblitz.com/edit/stackblitz-starters-x1bkvy?file=src%2Fmain.html

Features

• Directive for easily managing and handling multiple stickies the angular way

Dependencies

Latest version available for each version of Angular

ngx-many-sticky	Angular
0.1.6	15.x
current	>= 15.x

Install

npm install ngx-many-sticky --save

Custom CSS classes required for animation.

Setup

• Module based

import { CommonModule } from "@angular/common";

import { NgxManyStickyModule, SrollHelper } from "ngx-many-sticky";

@NgModule({
  imports: [CommonModule, NgxManyStickyModule],
  bootstrap: [App],
  declarations: [App],
})
class MainModule {}

Use

<div><b>debug:</b> {{ sticky0["debug"] | json }}</div>
<div #stickySpacer0></div>
<!-- Place spacer element where you want -->
<div
  many-sticky
  class="w-100 card bg-white"
  [groupIndex]="0"
  [elementIndex]="0"
  [spacer]="stickySpacer0"
  [options]="{
            animation: false,
            animationSpeed: '0.1s',
        }"
  [debug]="true"
  #sticky0
>
  <div class="row" style="height: 150px">
    <div class="col-md-2">Spacer Group:0 Element: 0</div>
    <div class="col-md-10">I am 0,0</div>
  </div>
</div>

License

MIT

---