[JavaScript] スクロールでヘッダーが見切れたときにクラスを設定したい（jQueryなし）

公開日:2021/09/26

ヘッダーナビゲーションを固定表示するときに、スクロールに合わせて表示要素を減らしたり、ヘッダーの高さを縮めたりといった処理をしたいことがあります。

今回はjQueryを入れていない環境でもサッと使えるように、Javascriptだけで実装しました。

サンプルコード

window.addEventListener('scroll', function() {
    const header = document.querySelector('header');
    if(window.scrollY > header.offsetHeight) {
        header.classList.add('js_active');
    } else {
        header.classList.remove('js_active');
    }
});

ウインドウに対して「addEventListener」で「scroll」イベント発生時の処理を設定します。

ウインドウのスクロール量とヘッダーの高さを比較して、スクロール量の方が多ければヘッダーに「js_active」クラスを設定します。

逆に、スクロール量がヘッダーの高さより少なければクラスを削除します。

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。