JavaScriptは無し、スクロールした時にヘッダの高さを縮ませて上部に固定表示させるCSSの実装テクニック
Post on:2021年3月1日
sponsors
スクロールした時にヘッダの高さが縮んで上部に固定表示させるWebページを見たことがあると思います。今まではJavaScriptを使用する必要がありましたが、CSSのposition: sticky;を一工夫して使用することで簡単に実装できます。
高さを縮ませるのはヘッダに限らず、パネルやバナーなど他の要素でも簡単に実装でき、汎用性にも優れていると思います。
Shrinking Header on Scroll Without JavaScript
by Håvard Brynjulfsen
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
デモページのデザインがシンプルなので、一見見落とすかもしれませんが、ページをスクロールするとヘッダの高さが縮んで上部に固定表示されます。
仕組みは、簡単です。
ヘッダは外側と内側の2つの要素で構成されています。外側のコンテナは内側のコンテナよりも背が高く、内側は垂直方向の中央に配置されています。
この外側と内側それぞれにposition: sticky;を適用することで、スクロールした時に外側はbodyにくっつき、内側は外側にくっつき、ヘッダの高さが縮みます。
position: sticky;は、ほぼすべてのブラウザでサポートされています。
実装のポイント
HTMLは、シンプルです。
ロゴとナビゲーションをdivで内包し、headerで内包します。
|
1 2 3 4 5 6 |
<header class="header-outer"> <div class="header-inner"> <div class="header-logo">ロゴ画像</div> <nav class="header-navigation">ナビゲーション</nav> </div> </header> |
ヘッダを固定表示するためにposition: sticky;を与え、高さを120pxにします。
また、align-items: center;でヘッダ内の要素を中央に配置するのもポイントです。
参考: flexコンテナ: align-items（アイテムの配置方法）
|
1 2 3 4 5 6 |
.header-outer { display: flex; align-items: center; position: sticky; height: 120px; } |
.header-innerにはロゴとナビゲーションが配置されています。縮んだ時の高さ70pxを定義し、ここにもposition: sticky;を与えます。
top: 0;は最上部に表示されますが、前述のalign-items: center;があるため中央に配置されます。
|
1 2 3 4 5 |
.header-inner { height: 70px; position: sticky; top: 0; } |
ヘッダの高さを縮ませて固定表示させるには、.header-outerにtop: -50pxを加えます。-50pxという値は、.header-outerと.header-innerの高さの差です。
これでヘッダの高さは、50px縮みます。
|
1 2 3 4 5 6 7 |
.header-outer { display: flex; align-items: center; position: sticky; top: -50px; /* 70-120 = -50 */ height: 120px; } |
実際の動作は、下記ページでご覧ください。
See the Pen
Shrinking header on scroll without Javascript by Håvard Brynjulfsen (@havardob)
on CodePen.
他の要素にこのテクニックを使用することもできます。
アラートのパネルもよくWebページで見かけますね。
See the Pen
Sticky banner by Håvard Brynjulfsen (@havardob)
on CodePen.
sponsors
