jQueryで簡単にヘッダー上部固定でページ内リンクがずれるのを防ぐ!

2014/08/21

こんにちは。
今回は jQueryで簡単にヘッダー上部固定でページ内リンクがずれるのを防ぐです。

以前書いたヘッダー上部固定でページ内リンクがずれる!の方法ではうまくいかない事があったので、他のやり方を試してみたので紹介したいと思います。

 

bodyタグの閉じタグの直前にjQeryを読み込ませます。
その下に下記のスクリプト読み込ませてヘッダーの高さの所の数値を調節します。

上記のスクリプトではヘッダーの高さ分位置をずらして移動します。

 

コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer's SELECTION)
コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer’s SELECTION)

 

いかがでしたか。簡単にできるのでオススメです。
以上でjQueryで簡単にヘッダー上部固定でページ内リンクがずれるのを防ぐ!でした。

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

topへ戻る