DETAIL NOTE

INTUITION DETAIL DESIGN BLOG

ヘッダ固定時のページ内リンクのずれを解消

position:fixedを使ってヘッダを固定した場合、
リンクタグでidを振ってあるところにページ内リンクで移動すると
位置がずれてタイトルなどが見えなくなってしまいます。
今回はその対処法を書きます。
方法は2つ。CSSで調整する方法と、JavaScriptで調整する方法があります。

【HTML】

CSSで調整する

padding-topでヘッダの高さ分ずらして、margin-topでマイナスの値をいれるとうまくいきます。

margin-top:-100px;

padding-top:100px;

JavaScriptで調整する

ヘッダの高さ分、ページTOPの位置をずらして移動します。
※jQueryを使用しています。

 

よくやりがちなので覚書でした。こういう細かいところにも気を配れるといいですね。

次へ 投稿

前へ 投稿

© 2022 INTUITION DETAIL DESIGN