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

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

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

 

 

CSSを使って解決する

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

 

コード

固定するもの(ヘッダー)が100pxの場合

<div class="header"></div>


<div class="content"></div>
.header{
  width: 100%;
  height: 100px;
  position: fixed;
  top: 0;
}

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

 

paddingで固定する箇所の高さ分広げてあげて、ネガティブmarginで広げた分を引いてあげるだけ!
なぜ-100pxするがと言うと隠れていないときでも上に100pxの隙間ができてしまうのでそのスキマを隠すためにしようします。

 

 

 

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

コメント