ミギムキ

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

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

今回は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です。