# @sygnas/scroll-amount
> Add scrolling state(top / not-top / bottom / not-bottom)
Latest version **2.1.0** (published 2021-11-27) · MIT license · 0 weekly downloads
## Install
```sh
npm install @sygnas/scroll-amount
pnpm add @sygnas/scroll-amount
yarn add @sygnas/scroll-amount
bun add @sygnas/scroll-amount
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 2.1.0 |
| Published | 2021-11-27 |
| First published | 2018-01-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 82.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Hiroshi Fukuda |
| Maintainers | sygnas |
| Keywords | scroll, navigation |
## Links
- npm: https://www.npmjs.com/package/@sygnas/scroll-amount
- Repository: https://github.com/sygnas/syg-scroll-amount
- Homepage: https://github.com/sygnas/syg-scroll-amount#readme
- Issues: https://github.com/sygnas/syg-scroll-amount/issues
- npm.io page: https://npm.io/package/@sygnas/scroll-amount
## Alternatives
- [express-promise-router](https://npm.io/package/express-promise-router.md) — 736.1K weekly downloads
- [next-usequerystate](https://npm.io/package/next-usequerystate.md) — 29.8K weekly downloads
- [@bitkyc08/opencodex](https://npm.io/package/@bitkyc08/opencodex.md) — 4.6K weekly downloads
- [lynkr](https://npm.io/package/lynkr.md) — 575 weekly downloads
- [baremetal.js](https://npm.io/package/baremetal.js.md) — 42 weekly downloads
## Recent versions
- 2.1.0 (latest) — 2021-11-27
- 2.0.3 — 2021-11-23
- 2.0.2 — 2021-11-21
- 2.0.0 — 2021-11-21
- 1.2.2 — 2019-06-03
- 1.1.2 — 2018-02-03
- 1.1.1 — 2018-01-08
## README
# syg-scroll-amount
ページの最上部、最下部、それ以外の状態を data属性に付与する。
## History
- 2021.11.27 ver.2.1.0
- ブラウザ版は削除
- 2021.11.21 ver.2.0.0
- TypeScriptで書き直した
- スクロールイベントではなく intersectionObserver を使うようにした
- スクロール位置検知用エレメントを `position:absolut` で配置する関係で、 に `position:relative` が付与される。
## Description
ページ最上部にいる時は`data-scroll-amount`属性に「top」を付与します。
最下部は「bottom」、それ以外は「no-top」「no-bottom」を付与します。
固定ヘッダーの出し入れや、ページトップボタンの出し入れなどに使います。
## Usage
### Install
```sh
npm install --save @sygnas/scroll-amount
```
### html / JS / css
```html
```
```JavaScript
import ScrollAmount from '@sygnas/scroll-amount';
const target1 = new ScrollAmount('.js-scroll-amount', {
// Options
});
```
```Sass
.scroll-amount{
transition: .2s;
&[data-scroll-amount ~= "top"]{
transform: translateY(-40px);
}
}
```
## Attributes
属性 `data-scroll-amount` にステータスが書き出されます。
```Example