ヘッダーを固定させた時のページ内リンクを調整する方法｜カケウェブ

ヘッダーを「fixed」で固定したとき、ページ内リンクの位置がずれてしまう問題を解決する方法を紹介します。

コンテンツ固定時のページ内リンク

ヘッダーを固定（position fixed）されているサイトでページ内リンクをさせると、コンテンツをヘッダーで隠れちゃう・・・ってことが起こります。
最近コーディングしているときにこの現象に出くわしたので、早速解決方法を書いておきます。
主な解決方法は２つCSSを使う方法とJSを使う方法です。

CSSを使って解決する

今回使うプロパティは「padding」と「margin」です。
かなりメジャーなので少しCSSをいじったことがあれば一瞬でできてしまいます。

コード

固定するもの（ヘッダー）が100pxの場合


&lt;div class="header"&gt;&lt;/div&gt;


&lt;div class="content"&gt;&lt;/div&gt;

.header{
  width: 100%;
  height: 100px;
  position: fixed;
  top: 0;
}

.content{
  margin-top: -100px;
  padding-top: 100px;
}

paddingで固定する箇所の高さ分広げてあげて、ネガティブmarginで広げた分を引いてあげるだけ！
なぜ-100pxするがと言うと隠れていないときでも上に１００pxの隙間ができてしまうのでそのスキマを隠すために使用します。
CSSで修正する方法は、JSで共通で実装するよりも最低範囲で調整でき、手軽なので個人的にはこちらの方法をよく使用します。

JSでの解決方法は現在執筆中です。