syg-scroll-amount v1.1.1

syg-scroll-amount

Set data attribute according to status at the time of page scroll(top / not-top / bottom / not-bottom ..)

ページスクロール時にステータスに応じたdata属性を付与する（top / not-top / bottom / not-bottom ..）。

Description

スクロールに応じた固定ヘッダーの出し入れなどに使います。 ブラウザがページスクロールした時に、「ページ最上部にいる」「ページ最上部にいない」などのステータスのdata属性をエレメントに付与します。

Usage

Install

npm install syg-scroll-amount

html / JS / css

<header class="js-scroll-amount scroll-amount">
    ...menu...
</header>

import ScrollAmount from 'syg-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 pin">

Options

License

MIT