メニューをページ上部に固定する

縦に長いページでは、下までスクロールするとメニューが見えなくなってしまいます。このレッスンでは、スクロールしてもヘッダー（ロゴとメニュー）が画面の上に残るようにします。

固定する方法は2つ

sticky で固定する

前回の完成版に、次のCSSを足すだけです。

/* ---- ヘッダーを画面の上に固定する ---- */
.header {
  position: sticky;           /* スクロールして上端に来たら止まる */
  top: 0;
  z-index: 100;               /* ほかの要素より手前に */
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

• position: sticky と top: 0 … スクロールして画面の上端（0の位置）に来たら、そこで止まります。
• z-index: 100 … 重なりの順番です。数字が大きいほど手前に表示されます。ヘッダーがページの中身の下にもぐらないように、大きめの数字にします。
• box-shadow … ヘッダーの下に薄い影を付けて、ページの中身と重なっていることがわかるようにしています。

【ポイント】背景色を忘れずに
ヘッダーに背景色がないと、固定したヘッダーの後ろにページの文字が透けて見えます。今回は土台のCSSで background: #fff を指定しています。

fixed で固定する場合

position: fixed でも固定できます。ただし fixed にした要素は、ページの流れから外れて浮いた状態になります。そのため、ヘッダーの高さのぶん、ページの中身が上にもぐりこみます。body に padding-top を付けて、中身を下げておきましょう。

/* ヘッダーを画面の上に貼り付ける */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}
/* ヘッダーの高さのぶん、中身を下げる */
body {
  padding-top: 64px;
}

sticky が効かないときは

sticky を書いたのに止まらないときは、次のことを確認しましょう。

• top（どこで止まるか）を指定しているか
• 親要素に overflow: hidden が付いていないか（付いていると止まりません）
• 固定したい要素が、親要素の最後まで来ていないか（sticky は親要素の中でしか止まれません）

まとめ

• position: sticky と top: 0 で、スクロールしてもヘッダーが上に残る
• position: fixed を使うときは、中身がもぐりこまないように padding-top を付ける
• 固定する要素には、背景色と大きめの z-index を付ける