ヘッダーを固定表示にするとページ内アンカーがずれる

目に見えない余白をつくる

下記のような事例を想定します。

グレーのヘッダーはスクロールしてもウィンドウ上部に固定表示するようにします。

スタイルは次のように指定しています。

header{
  position: fixed;
  top: 0;
  left: 0;
}

記事(article)のタイトル部分にページ内アンカーを貼ると、以下のようにずれてしまいます。

拡大するとこのような感じになっています。

どうやら、position:fixedにした要素の描画領域は無視されるようです。

そこで、ヘッダーの高さ分だけ見えない余白を作ります。

※ここでは、ヘッダーの高さが70pxあると仮定します。

article{
  padding-top: 70px;
  margin-top: -70px;
}

paddingと同じ分だけマイナスマージンを設定します。

こうすることで、見た目上は変化がなくともヘッダーの高さ分だけ余白を作ることができ、ページ内アンカーがずれることはなくなります。