@sygnas/scroll-amount v2.1.0

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">

Options

License

MIT