アンカーリンクのナビを置いてスクロールでfixedに切り替えるときの注意点

アンカーリンクのナビを置いてスクロールでfixedに切り替えるときの注意点

fixedになるとコンテンツの高さが変わる

最近ナビゲーション部分をウィンドウ上部までスクロールするとposition:fixedに切り替わってスクロール時に上部に配置され追随されるものがあるがWebページ内のナビゲーションがfixedに切り替わるとコンテンツから高さがその分引かれるためナビゲーションがアンカーリンク先への遷移の場合、正しく目的のところまで遷移できなくなってしまう。

例えばWebページ内の高さが2140pxでナビゲーションの高さが70pxのfixedになることで2140px-70px=2070pxとなりその分アンカーリンクの位置も変わるため正しく遷移できなくなる。

fixed時にアンカーリンクで正しく遷移できないサンプル

ナビゲーションの高さを取得して計算する

ナビゲーションの高さを取得してアンカーリンククリック時の移動位置を補正し、fixedになったときは失った高さ分を追加しておけば位置がずれることはなくなる。下記のサンプルではアンカーリンククリック時の移動位置アンカーリンククリック時の移動位置をナビゲーションの高さで引き、fixed時にナビゲーションの高さ分の空のdivを追加している。

fixed時にアンカーリンクで正しく遷移するサンプル