JavaScriptは無し、スクロールした時にヘッダの高さを縮ませて上部に固定表示させるCSSの実装テクニック

スクロールした時にヘッダの高さが縮んで上部に固定表示させるWebページを見たことがあると思います。今まではJavaScriptを使用する必要がありましたが、CSSのposition: sticky;を一工夫して使用することで簡単に実装できます。

高さを縮ませるのはヘッダに限らず、パネルやバナーなど他の要素でも簡単に実装でき、汎用性にも優れていると思います。

Shrinking Header on Scroll Without JavaScript
by Håvard Brynjulfsen

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

デモページのデザインがシンプルなので、一見見落とすかもしれませんが、ページをスクロールするとヘッダの高さが縮んで上部に固定表示されます。

デモページ

仕組みは、簡単です。
ヘッダは外側と内側の2つの要素で構成されています。外側のコンテナは内側のコンテナよりも背が高く、内側は垂直方向の中央に配置されています。

この外側と内側それぞれにposition: sticky;を適用することで、スクロールした時に外側はbodyにくっつき、内側は外側にくっつき、ヘッダの高さが縮みます。

position: sticky;は、ほぼすべてのブラウザでサポートされています。

position: sticky;のサポートブラウザ

実装のポイント

HTMLは、シンプルです。
ロゴとナビゲーションをdivで内包し、headerで内包します。

ヘッダを固定表示するためにposition: sticky;を与え、高さを120pxにします。
また、align-items: center;でヘッダ内の要素を中央に配置するのもポイントです。
参考: flexコンテナ: align-items（アイテムの配置方法）

.header-innerにはロゴとナビゲーションが配置されています。縮んだ時の高さ70pxを定義し、ここにもposition: sticky;を与えます。
top: 0;は最上部に表示されますが、前述のalign-items: center;があるため中央に配置されます。

ヘッダの高さを縮ませて固定表示させるには、.header-outerにtop: -50pxを加えます。-50pxという値は、.header-outerと.header-innerの高さの差です。
これでヘッダの高さは、50px縮みます。

実際の動作は、下記ページでご覧ください。

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.