【jQuery】 スクロールすると途中からメニューバーが画面トップに留まる
全てのコンテンツが一枚のシートにつらつらと書かれていて、スクロールしてみていくというサイト、最近多いですよね。
その時に、メニューを画面トップにとどめておきたいというのはよく思うことですよね。
やってみました。
HTML
jQueryのライブラリ読み込みをheadタグ内、CSSの読み込みの後に、入れておきます。
あと、メニューバー全体に、#navというidをつけておきました。
.navfixed { position: fixed; top: 0px; z-index: 9999; margin: 0 10px 0 10px; }
$(function(){ var nav = $("#nav"); var navTop = nav.offset().top; $(window).scroll(function(){ if($(window).scrollTop() >= navTop) { nav.addClass("navfixed"); $("body").css("margin-top","50px"); } else { nav.removeClass("navfixed"); $("body").css("margin-top","0px"); } }); });
参考にしたサイト：
こちらが大変わかりやすく説明してくださっていました。
Webpark「jQueryを使った一定以上スクロールすると上に固定される横メニュー」
以上～
