この記事ではスクロールしたときに高さの変化するヘッダの実装方法を解説します。高さに限らずスクロールに応じて要素のデザインを変えたい場合にも応用可能ですよ。JavaScript部分にフォーカスして説明しているので、JavaScriptが苦手な方はぜひご一読ください！ サンプルページの解説 わかりやすく説明するために、サンプルページを用意しました。 See the Pen Scroll-Responsive Header & Sticky Sidebar by Aizawa Web Design (@AizawaWebDesign) on CodePen. サンプルページには以下の動きが付いています。 実はこのWebサイトのヘッダもPC表示のときには同様の動きを付けています。タイトル部分がけっこう大きいので、邪魔にならないようにスクロール時はナビゲーションバー部分だけを表示しています。 なお、サンプルページのHTMLとCSS部分は以下の記事で詳しく紹介しているので、気になる方はぜひ併せてご覧ください！ ヘッダを変化させるためのJavaScriptコード全容 ではさっそくJavaScriptのコード全体を見てみましょう。 ページがスクロールされるとheaderに.header–compactというクラスを付けて、クラスが付いたときのスタイルをCSS上で調整（今回の場合、サイト名を非表示にしてナビゲーションバーのみ表示）しています。 反対にスクロールでページの上まで戻ってきたときは.header–compactクラスを外して、元の表示に戻すというシンプルな仕組みです。 ほかにもいくつか細かな調整をしているので、その点も含めてもう少し詳しく紹介していきますね。 スクロールに応じたクラスの付け外し 以下の部分でまず「スクロールされたらクラスを付ける」という指示を出しています。 scrollYという変数でwindow.scrollYの値を呼び出しています。 つまり、上記コードの1行目は「スクロール量が1pxを超えたら（少しでもスクロールされたら）」ということです。 その場合に、classList.addによってheaderにheader–compactというクラス名を付けています。 また、elseに続く部分で、スクロール位置が1pxを超えないとき＝ページのほぼ一番上に戻ってきたときにはclasslist.removeで先ほど付けたクラス名を外すように指示を出しています。 あとは.header–compactに対してCSSで希望するスタイルをあてれば、スクロールによって変化するヘッダの基礎部分は完成です！ ヘッダの高さによって続くコンテンツの上部余白を調整する ちょっとわかりづらい見出しになってしまいました… 今回のサンプルページはヘッダの下に固定サイドバーがあります。そのため、ヘッダの高さが変化したときは、ヘッダの高さが小さくなった分だけサイドバーが上にずれてしまっていました。 そこで、サイドバーを含む.containerに対して、変化したあとのヘッダの高さ分、上部に余白を追加することにしました。 ここでは要素＝headerの見た目の高さをリアルタイムに取得して、その値が.containerの上部のpaddingに追加されるようにしています。 container.style.paddingTopの部分は、containerという要素のCSSにおけるpadding-topプロパティをJavaScriptから直接変更して！という意味ですね。 こうすることで、ヘッダの高さが変わってもサイドバーとヘッダの位置関係が変わらないように調整されています。 調整されたレイアウトを維持する工夫 最後に、レイアウト崩れを防ぐため、いつこの一連の処理を実行するかを設定（＝イベント登録）します。 ここでは「スクロールに応じてヘッダなどのレイアウトを変化させる」という動きを、addEventListenerを使ってscrollとloadとresizeというイベントが起こるたびに実行して、という指示を書いています。 いずれのイベントもヘッダの高さに関わるため、これらを書いておくことで最初からスクロールされた状態（例えばリンクでページ下部に飛んできたときなど）で表示された場合や、ウィンドウのサイズが変わった場合でもレイアウトが崩れにくくなります。 ちなみによく使われるイベントには次のようなものがあります。 scroll ページがスクロールされたとき load ページの読み込みが完了したとき resize ウィンドウサイズが変わったとき click 要素がクリックされたとき input フォームの値が変わったとき … Continue reading スクロールで高さが変化するヘッダの実装方法