ヘッダーをposition:fixedしたときにページ内リンクがずれる件を解決したい

htmlは以下の場合を想定しています。

①cssでずれを解消する

paddingでヘッダー分ずらして、marginでずらした分マイナスにします。
リンクが多い場合すべて指定する必要があるので、抜けないようにだけ注意です。

②JQでずれを解消する

<a href=#〇〇></a>をクリックしたときに、ヘッダーの高さ分を引いてリンクしますね、という指定です。

必ずこちらのコードを読み込む前に、JQを読み込ませるようにしましょう。でないと動きません!
また、上の記述だとページ内すべての<a href=#〇〇></a>に対して100pxずらす、という指定になっています。
ハンバーガーメニューなどで<a href=#〇〇></a>を使用しているとこちらの指定のせいで上手く動かなくなりますので注意が必要です。
三行目を

など、必要な部分にだけクラスを当ててあげるといいですよ。

参考にさせていただきました↓
https://www.tam-tam.co.jp/tipsnote/html_css/post4776.html

タイトルとURLをコピーしました