# ngx-scrollspys

> Plugin to create a smooth and custom scrollspy experience in your application

Latest version **1.0.4** (published 2019-05-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-scrollspys
pnpm add ngx-scrollspys
yarn add ngx-scrollspys
bun add ngx-scrollspys
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2019-05-29 |
| First published | 2019-05-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 5.3 MB |
| Known vulnerabilities | 0 (+8 in 1 direct dependencies) |
| Install scripts | no |
| Author | Jonathan Ijeh |
| Maintainers | captajo |
| Keywords | Scrollspy, Angular2, TypeScript, Scroll, Spy, ng2 |

## Links

- npm: https://www.npmjs.com/package/ngx-scrollspys
- Repository: https://github.com/captajo/ngx-scrollspys
- Homepage: https://github.com/captajo/ngx-scrollspys#readme
- Issues: https://github.com/captajo/ngx-scrollspys/issues
- npm.io page: https://npm.io/package/ngx-scrollspys

## Dependencies (2)

- [rxjs](https://npm.io/package/rxjs.md) ^6.5.2
- [@angular/core](https://npm.io/package/@angular/core.md) ^7.2.15

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2019-05-29
- 1.0.3 — 2019-05-29
- 1.0.2 — 2019-05-29
- 1.0.1 — 2019-05-29
- 1.0.0 — 2019-05-29

## README

# ngx-scrollspys
This is an extension for Angular 2+ applications, for smooth scroll-spy experience

# Installation
Install this extension from npm repository using

      - npm i ngx-scrollspys --save

# Setting Up
Setup in your angular project by importing, `NeatScrollspyModule` into your `app.module.ts`

          import { NeatScrollspyModule } from 'ngx-scrollspys'; 

          ...... 

          @NgModule({
            declarations: [ ... ],
            imports: [
              ....
              NeatScrollspyModule,
            ]
          })


# Getting Started
NeatScrollspy can be used real quick and easy, with just two basics. 

1. Set the point in your HTML you want to monitor scroll 

        <div [neatScrollSpy]="{ id: 'uniqueID', selector: 'mains'}">
              // Place code you want to spy on scroll here with assigned selector as class
              // Example <h2 class="mains"></h2>
        </div>
              
2. Set where to display scroll options and responses 

        <neat-scrollspy-template [neatScrollspyOptions]="{ id: 'uniqueID' }"></neat-scrollspy-template>


# neatScrollSpy (directive)
This is the marker used to tell the extension to listen for elements within its span. The available options for this directive are as follows:

| Option | Description |
| ------ | ----------- |
| id     | This is a unique field used by the extension template to identify its marker. Note: This field must be unique |
| selector | This is a class field, used by the extension |


# neat-scrollspy-template (template)
This is the template for neat-scrollspy, which display the scroll options. Available directives within this template are:



# highlightOptions (directive)
This option is used for editing the highlighting style of the neatScrollSpy extension. Example of usage:

        <neat-scrollspy-template [highlightOptions]="{ type: 'bold' }" [neatScrollspyOptions]="{ id: 'uniqueID' }"></neat-scrollspy-template>

| Option | Description |
| ------ | ----------- |
| type   | Uses this option to indicate the type of highlight you want. Available options are: "bold" and "background-color". Default is "bold" |
| highlightColor | This is the color taken by the currently displayed element within view. It is used to indicate which element is currently within view. Default is "blue" |
| defaultColor | This is the default color used by all other elements outside the current view. Default is "black" |
| highlightTextColor | This is the text color used by all elements within the current view. Default is "white" |



# selectionOrder (directive)
This option is used for editing the number of items highlighted on a page. Example of usage:

        <neat-scrollspy-template [selectionOrder]="{ type: 'first' }" [neatScrollspyOptions]="{ id: 'uniqueID' }"></neat-scrollspy-template>

| Option | Description |
| ------ | ----------- |
| type   | This is used to indicate which element(s) within view is highlighted. Available options are; "first" and "all". `first` - This highlights the first element within vie. `all` - This highlights all element within view |



# alignOption (directive)
This option is used for editing the alignment structure on the page. Example of usage:

        <neat-scrollspy-template [alignOption]="{ type: 'straight' }" [neatScrollspyOptions]="{ id: 'uniqueID' }"></neat-scrollspy-template>

| Option | Description |
| ------ | ----------- |
| type   | This is set alignment for the scrollspy options. The Available options are: "straight", "auto", "manual". `straight` - This aligns all scrollspy options in a straight line (Default). `auto` - This aligns the scrollspy options in a tree manner, using regular [h1 - h5]. `manual` - This aligns the scrollspy options as set by the users. Users can set indentation using the "data-align" attribute. |
| topMargin | This accepts an `integer` as value, indicating the distance from the top of the page to the selected item when clicked. Default `70` |


# TODO

 - Unit Test
 - Publish Example Page

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