スクロールした際にヘッダーが追従してくるホームページを最近よく見かけますよね。

ページの下部にいてもヘッダーがすぐに確認できるので、他ページへリンクする際にとても便利です。

 

しかしヘッダーを固定していると、ページ内リンクでコンテンツにジャンプした際にリンク先の要素がヘッダーの下に隠れて表示されてしまいます。

 

この問題を解決するには、以下のようにCSSを指定してやりましょう。

#content {
margin-top: -50px;
padding-top: -50px;
}
上記はページ内リンク先を「#content」とし、ヘッダーの高さが50pxだった場合のCSSコードになります。
ヘッダーの高さ分をpaddingとmarginで調整しています。