npm.io
2.1.0 • Published 4 years ago

@sygnas/scroll-amount

Licence
MIT
Version
2.1.0
Deps
0
Size
82 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

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
npm install --save @sygnas/scroll-amount
html / JS / css
<header class="js-scroll-amount scroll-amount">
    出し入れしたい内容
</header>
import ScrollAmount from '@sygnas/scroll-amount';

const target1 = new ScrollAmount('.js-scroll-amount', {
    // Options
});
.scroll-amount{
    transition: .2s;

    &[data-scroll-amount ~= "top"]{
        transform: translateY(-40px);
    }
}

Attributes

属性 data-scroll-amount にステータスが書き出されます。

<header class="js-scroll-amount scroll-amount" data-scroll-amount="top no-bottom">
name comment
top スクロール位置が最上部
not-top スクロール位置が最上部ではない
bottom スクロール位置が最下部
not-bottom スクロール位置が最下部ではない

Options

option default comment
offsetTop 70px スクロール位置がこの値より上ならページ最上部と判断
offsetBottom 70px スクロール位置がこの値より下ならページ最下部と判断
onTop function 最上部にスクロールした時に実行
onNotTop function 最上部から離れた時に実行
onBottom function 最下部にスクロールした時に実行
onNotBottom function 最下部から離れた時に実行

License

MIT

Keywords

scrollnavigation