【jQuery】 スクロールすると途中からメニューバーが画面トップに留まる

スポンサーリンク
広告

全てのコンテンツが一枚のシートにつらつらと書かれていて、スクロールしてみていくというサイト、最近多いですよね。

その時に、メニューを画面トップにとどめておきたいというのはよく思うことですよね。

やってみました。

 


HTML

jQueryのライブラリ読み込みをheadタグ内、CSSの読み込みの後に、入れておきます。

 

あと、メニューバー全体に、#navというidをつけておきました。

 


CSS

.navfixed {     position: fixed;     top: 0px;     z-index: 9999;     margin: 0 10px 0 10px; }

 


jQuery

$(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");     }   }); });

 

 

参考にしたサイト:

こちらが大変わかりやすく説明してくださっていました。

WebparkjQueryを使った一定以上スクロールすると上に固定される横メニュー

 

以上~