ネットで話題のニュースを紹介

ヘッダを[position:fixed]で固定した際、ページ内リンクの位置がずれるのを解消する方法

当ブログもそうですが、最近はヘッダ部を固定して表示するページが非常に増えました。

ノートパソコンで作業中

しかし、[position:fixed]でヘッダを固定している場合、ページ内リンクの位置がヘッダの高さ分ずれてしまいます。今回はその場合の対処方法を紹介します。

ページ内リンクの位置ずれを解消する方法

CSSで調整する方法と、JavaScript(jQuery)で調整する方法があります。今回はヘッダの高さを「100px」に設定した場合で説明します。

CSSで調整する方法

padding-topでヘッダの高さ分ずらし、margin-topで同じ値をマイナスにいれます。

JavaScriptで調整する方法

移動するターゲットの座標から、ヘッダの高さ分位置をずらします。

どちらでも実現できますが、ページ内リンクの数が多い場合はJavaScriptで対応した方が楽だと思います。

参考サイト:position:fixedでヘッダ固定時のページ内リンクのずれを解消したい

関連する記事

コメント

※コメントは承認制のためすぐには反映されません。