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

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

ヘッダーを固定(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での解決方法は現在執筆中です。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする