レスポンシブで固定ヘッダー高さが可変する際のアンカースクロールを簡単実装

2016/8/12 CSS

レスポンシブで固定ヘッダーの高さが可変。アンカースクロールがうまく設定できない。

ヘッダーにposition:fixed;を適用していて固定していると、ページ内スクロールでスルスルーっと移動するときにズレが生じてしまいます。

そんな時はheaderの高さ分、cssで調整します。

cssで実装する方法

cssに下記コードをコピペ

これで100pxの高さのheaderであることを考慮してスムーズスクロールが可能です。

jQueryで実装する方法(これが確実な方法!!)

ですが、レスポンシブ対応のサイトだったり、ブラウザの幅によってheaderの高さが変化する場合はcssで調整するよりJavaScriptで調整する方法が楽です。

jQueryを読み込んだ後に

jsに下記コードをコピペ

これでheaderの高さを取得して修正してくれます。

投稿者:気まぐれWEBLOG管理人