追従ヘッダー実装時に使える動作・デザインパターン例

変更を加えずにそのまま追従

スクロール時にデザイン・位置とも特に変更を加えず、単純にファーストビューでの見栄えをそのまま維持して追従させるパターンです。
少しCSSを書くだけで容易に実装できる点がメリットですが、ヘッダーの領域が広いデザインの場合はその分コンテンツが見える領域が狭くなるというデメリットがあるので、仕様やデザイン上でどうしてもヘッダー領域が広くなってしまう場合は、デザインの変更やこれ以降紹介するパターンを取り入れることを検討した方が良いと思います。

TOPページのみになりますが、「Apple」では、ヘッダーをファーストビューでの見栄えそのままで追従させる動きを実装しています。 ただ、追従させるヘッダー領域が狭めで一般的なモニターサイズで閲覧していればコンテンツの表示領域は十分あると思うので、ほとんどの場合は気にならないと思います。

以下のサイトでも変更を加えずヘッダーをそのまま追従させるパターンを採用しています。

追従時に見た目を変更

スクロール時にファーストビューとは異なる見た目に変更するパターンで、上に書いたようにヘッダーにいろいろ配置する必要があって領域を広く取ってしまうけど追従させたいとか単純に追従時はすべてを見せる必要がないときなどに使われることが多いパターンのひとつです。
よく見かける動きとして、例えば以下のようなものがあります。

高さを変更

ファーストビューで表示されている高さをスクロール時に変更することでヘッダー領域を狭くし、ヘッダーが追従していてもコンテンツの表示領域が少しでも広く取られるようにする。

要素のサイズを変更

ロゴ・ナビゲーション・CTAボタンといったヘッダーに配置されることが多い要素のサイズをスクロール時にファーストビューでの表示よりも小さくすることでヘッダー領域を狭くする。

要素の追加・削除

同じくヘッダー領域を狭くさせる方法のひとつとして、いっそのことファーストビューで見えていたものをスクロール時には削除（非表示）にしてしまう。
また、逆に新たな要素を追加する方法もあり、例えばファーストビューではずらっと並べられたナビゲーションやCTAボタンなどをスクロール時に非表示にし、その代わりにそれらを表示させるハンバーガーボタンを追加（表示）させることで、結果的に追従時はシンプルに見せて且つヘッダー領域を狭くする。

大幅なサイズ変更

基本的には上にあげたスクロール時のサイズ変更や要素の非表示を組み合わせることでヘッダー領域を狭くするものだが、高さだけでなく横についても大幅にサイズ変更してウィンドウの左上または右上の端に寄せるなどして、全体的にあまり目立たないコンパクトな感じの追従ヘッダーにする。

背景を変更

特にファーストビューでは背景色がついてないデザインの場合に、コンテンツとの違いを付けるためや追従時にヘッダー内のコンテンツが見辛く感じるのを改善するためにスクロール時に背景色を付ける。
逆に背景色が付いている場合に、コンテンツより少しでも目立たせないようにするためにスクロール時に背景色を消したり少し透過させる。

透過率を変更

追従させるヘッダーが少しでも目立たなくするためにスクロール時にはヘッダー全体の透過率を下げ、その際にヘッダーをホバーなどした場合には透過を解除する動きを実装しているサイトもある。

以下のサイトでも追従時に見た目を変更するパターンを採用しており、「東京スカイツリー」ではロゴ・ナビともに小さい画像に差し替え、「BAUS」ではロゴサイズ変化と一部テキストを非表示にさせることでヘッダー領域がスクロール時に狭くなります。

異なるヘッダーを追従させる

例えば、制作側の問題で追従時に見た目を変更するパターンを適用するのが難しい場合（ワンソースでファーストビュー時と追従時両方の見栄えを再現できないなど）は、いっそのこと追従用のヘッダーを別途用意するという手もあります。
結果的に2つのヘッダーを作成する手間は発生しますが、その分コンテンツやデザインが大きく異なっていたとしても要望通りの形に実装しやすいメリットはあります。
追従時の動きとしては、ファーストビューで確認できるヘッダーが見えなくなったタイミングで、追従させたいヘッダーを上からスライドで表示させたりフェードインさせているサイトをよく見かけます。

いずれもファーストビュー時と追従時で大幅にコンテンツが異なっているわけではありませんが、以下のサイトでも異なるヘッダーを追従させるパターンを採用しています。

途中から追従

ヘッダーというよりナビゲーション部分に採用しているのを見かけることが多いですが、ウィンドウ上部が追従させたい要素まできたらとかある程度スクロールされたらなど、ヘッダーやナビゲーションなど特定の箇所を途中から追従を適用させるパターンです。

以下のサイトでも特定の箇所を途中から追従させるパターンを採用しており、「RIDE MEDIA&DESIGN株式会社」のように途中から追従させるだけでなくロゴ表示や背景色変更といった見た目の変化も組み合わせているサイトも多くあります。

スクロール方向によって表示・非表示の切り替える

こちらは上で紹介してきたものとはまた違ったパターンで、ヘッダー追従自体は常に行なっているようなものですが、その表示・非表示をスクロールした方向によって切り替えるというパターンです。
具体的な動きとしては、基本的にユーザーがページを下にスクロールする場合はコンテンツを見たいときだという想定でコンテンツ領域を広くするために追従ヘッダーを非表示にし、逆にページを上にスクロールした場合はユーザーがヘッダーを見るためという想定で追従ヘッダーを表示させるというものになります。

別にヘッダー部分にいきたいとかではなく、単純に現在地より少し上にあるコンテンツを見たかった場合などには突然ヘッダーが表示されて邪魔なんてこともありはしますが、逆にわざわざ一番上まで行かなくともヘッダーを確認できる点や基本的にページを下にスクロールして見ているときはコンテンツ領域が広くなることを考えると、個人的には単純に追従させるパターンよりも好みです。
（追従ヘッダーの実装理由が、常にユーザーの視界に入れたいものがあるとかだと使えないですが...）

以下のサイトでもスクロール方向によって表示・非表示の切り替えるパターンを採用しており、「株式会社サイバーエージェント」の場合はビジュアルの高さ以上スクロールした場合にヘッダーを非表示にし、「GINZA SIX」の場合はヘッダー全体ではなくナビゲーション部分にだけこの動きを採用しています。

その他

ここまで紹介してきたものはいずれも比較的よく実装したり見かけるものでしたが、レアパターンとして個人的にあまり見かけないと思ったものを簡単に紹介します。

ウィンドウ上部ではなく下部で追従させる

「窯焼きパスコ」では、ビジュアルが見える範囲ではよくある追従ヘッダーの動きですが、ビジュアルの高さ以上にスクロールするとヘッダーで表示させていたコンテンツをウィンドウ下部で表示して追従する動きを実装しており、さらにページ下部までいった場合は非表示にしています。

一部要素のみ追従

「FIL」では、ヘッダー全体ではなくファーストビューだとヘッダーコンテンツの一部に見えるハンバーガーメニューのみを追従させる動きを実装しています。
また、他にはロゴとCTAボタンのみを追従させるという動きを実装しているサイトもあります。

追従ヘッダーをフッター手前で非表示にする

実装しているサイトを忘れてしまったのですが、「5. スクロール方向によって表示・非表示の切り替える」で紹介した「タカミ化粧品」とは逆で、基本的には追従ヘッダーを常に表示させているのをフッターまでいったら非表示にするという動きです。
どのような意図でその動きを実装したのかはわかりませんが、そのサイトの場合は追従ヘッダー内のコンテンツがロゴとナビゲーションのみのシンプルな構成で、フッターがサイトマップのように各ページへのリンクが多数並べられている感じのデザインだったので、わざわざウィンドウ内に2つのナビゲーションを表示する必要はなく且つフッターの方がより沢山のリンクが並べられていたことから、ヘッダーをフッター手前で非表示にするという動きを実装したのかなと思いました。

ヘッダー付近をホバーすると表示

こちらも実装しているサイトを忘れてしまったのと正直なぜこのような動きを実装していたのか理解はできなかったのですが..。
基本的には単純な追従ヘッダーなのですが、ある程度ページをスクロールをしたタイミングでフェードアウトし、本来表示したままなら追従ヘッダーが表示されているであろう部分にホバーする（ポインターを持っていく）とヘッダーがフェードインするという動きです。
この動きに関してはなぜこのような動きを実装したのかの理由が検討もつかなかったですし、たまたまウィンドウ上部にポインターを持っていったので気付いた感じなので自分ならまず間違いなく実装することはない動きですが、実際にこのようなパターンを採用しているサイトがありました。

ユーザー側で追従を止める

動きとしては広告やバナーなどで使われているのをよく見かける印象ですが、追従ヘッダー内にボタンが設けられており、それを押下することで追従する動きをユーザーが解除できるようにしたパターンです。 ただ、そのサイトの場合は他のページに遷移するとまた追従状態になっていたので、個人的にはこの動きを取り入れるなら追従解除を選択した情報の保持などの実装も行った方が良いように思いました。