@sygnas/scroll-amount

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