# ngx-many-sticky

> ngx-many-sticky handles sticky menus the angular way. Can group sticky objects. See example on stackblitz: https://stackblitz.com/edit/stackblitz-starters-x1bkvy?file=src%2Fmain.html

Latest version **0.1.7** (published 2024-01-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-many-sticky
pnpm add ngx-many-sticky
yarn add ngx-many-sticky
bun add ngx-many-sticky
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.7 |
| Published | 2024-01-02 |
| First published | 2023-10-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 158.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | yupdon |
| Maintainers | yupdon |
| Keywords | angular, sticky, directive |

## Links

- npm: https://www.npmjs.com/package/ngx-many-sticky
- Repository: https://github.com/dontboyle/ngx-multi-sticky
- Issues: https://github.com/dontboyle/ngx-multi-sticky/issues
- npm.io page: https://npm.io/package/ngx-many-sticky

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Recent versions

- 0.1.7 (latest) — 2024-01-02
- 1.0.2 — 2024-01-02
- 0.1.6 — 2023-10-02
- 0.1.5 — 2023-10-02
- 0.1.4 — 2023-10-02
- 0.1.3 — 2023-10-02
- 0.1.1 — 2023-10-02
- 0.1.0 — 2023-10-02

## README

<div align="center">  
  <h1>ngx-many-sticky</h1>
  <br>
  <br>
</div>

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

```bash
npm install ngx-many-sticky --save
```

Custom CSS classes required for animation.

## Setup

- Module based

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

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

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

## Use

```html
<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

---

---
_Source: https://npm.io/package/ngx-many-sticky · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._