スクロールしてもページ上部にメニューを固定するjQuery
更新日：2016年2月7日
1ページ毎のボリュームがあまりないサイトでは必要性を感じませんが、ボリュームがあるサイトではどうしてもページが縦に長くなってしまいますよね。
下の方までスクロールした状態で、上部のグローバルナビから他のページへ移動したい際にまた上にスクロールし直すのは大変面倒です。
だったら、スクロールした場合にページ上部にメニューを固定しちゃえばいいんです。固定しっぱなしではなく、上にスクロールし直した場合にはちゃんと通常のメニューに戻る必要もありますね。
それではどのように実装するかというと、まずCSSで
と記述します。
このCSSは後述するjQueryの記述の際に使用するもので、メニューをページ上部に固定するCSSです。
そしてjQueryには
02 | var menu_f = $("#nav"); |
03 | var menu_f_top = menu_f.offset().top; |
04 | $(window).scroll(function () { |
05 | if($(window).scrollTop() >= menu_f_top) { |
06 | menu_f.addClass("fixed"); |
07 | $("body").css("margin-top","50px"); |
09 | menu_f.removeClass("fixed"); |
10 | $("body").css("margin-top","0"); |
と記述します。
var menu_f = $("#nav");の #nav の部分には固定したいメニューを囲んだ要素を選択してあげて下さい。
また、$("body").css("margin-top","50px");の 50px の部分は固定したいメニューの高さを指定してあげて下さい。当サイトの場合は50pxなので、仮に50pxとしています。
上記のソースはメニューより下までスクロールされた際に、メニューに.fixedを付与し、固定します。そして上にスクロールし直した場合にはメニューから.fixedを削除して、元に戻しているのです。
実装しているサイトも多いですし、近頃人気がある手法です。
何よりユーザビリティ向上にも繋がりますので、是非お試し下さい。
