サウウェブ

B'z、映画、海外ドラマ、スケボー、車、BUMPのネタバレまとめ

WEB

ヘッダーがfixed固定のときにページ内アンカーリンクの位置を調節するJavaScript

PC ノートPC パソコン macbook

ヘッダーをposition:fixedで固定させたときに、ページ内アンカーリンクの位置がヘッダーに被ってしまうときの対策方法です。

cssで対処する方法がいろいろあるけれど、手っ取り早くヘッダーの高さ分調節する方法のjs対策を備忘録のために残しておきます。

スマホ表示の時にはアンカーリンクの位置をずらさない記述も書いています。

スポンサーリンク

アンカーリンクの高さを調節するJavaScript

ヘッダーの高さに応じてheaderHightの値を変更するだけです。
状況に合わせて「100」の値を変更してください。

 

スマホのときは高さを調節しないJavaScript記述

PCのときは固定ヘッダーの分の高さに応じてずらしたいけど、スマホのときはアンカーリンクの位置をずらしたくないときのJavaScriptの記述です。

ちょっと長いか、もっと短くできるかも。

 

おまけ

アンカーリンクの位置を調節するcss

cssでアンカーリンクの場所をpaddingとネガティブmarginを使って調節するときの記述です。

これでレスポンシブでも大体のヘッダー固定サイトは対応できると思います。

この記事が気に入ったら
いいね ! しよう

-WEB