jQuery

Javascript,jQuery

【JS】スクロールしたら画面途中にあるグローバルナビを画面上部に固定する方法

2018/01/21

トップページなどで、動画や画像コンテンツの下に配置してあったグローバルナビを、スクロールしたら画面上部に固定して表示するスクリプトを作成したので、備忘録を兼ねて紹介します。

スクロールすると上部で固定されるグローバルナビ

イメージ / デモ

デモ

デモはこちらから。

スクリプト

HTML

まずはグローバルナビ。
どこで使ったっけと過去の制作物をコピペしているので、探す手間を省けるようここに書いておきたいと思います。

HTMLは表示単純。まさに構造文書。

CSS

「.fixed」に

position:fixed
top: 0
z-index: 1000

を指定するのがポイント。

Javascript

jQueryを使用しますので、先に読み込ませてください。
以下のスクリプトを <script> と </script> の間に書けばOKです。

解説

軽く解説。

2行目:
offset() 関数で、グローバルナビの座標を取得します。
戻り値は {top: 529, left: 0} の様な配列となり、offset.top で、縦位置にアクセスできます。

4~10行目:
スクロールイベント(スクロールされた場合)の処理。

5~9行目:
$(window).scrollTop() で、現在のスクロールの縦位置を取得。
現在の縦位置とグローバルナビの縦座標位置と比較し、スクロール位置がグローバルナビより下となった場合に6行目で、グローバルナビ(#globalNavi)に fixed クラスを付与し、画面上部で固定します。

現在の縦位置がグローバルナビよりも上に位置している場合は、グローバルナビ(#globalNavi)から fixed クラスを削除します。

噛み砕いていけば、非常に単純なことしかしていない内容です。
要は、グローバルナビの位置を確認して、固定表示するかしないかを決めているだけということになります。

デモ

デモはこちらから。

-Javascript,jQuery
-, ,