jQueryでスクロールに追随するメニューを実装｜ Mana Design Lab.

よくあるスクロールに追随してメニューの位置を固定して常にメニューが表示されるようにするやつ。

(function($) {
	if($('#fixedBox').length){
		var nav	= $('#fixedBox'), //メニューの高さを変数に
			offset = nav.offset(); //変数「nav」のオフセット値を格納
		$(window).scroll(function(){
			if($(window).scrollTop() > offset.top){ //メニューの位置よりスクロール量が多くなったら
				nav.addClass('fixed'); //メニューのclassに「fixed」を追加
			}else{
				nav.removeClass('fixed'); //メニューの位置よりスクロール量が小さくなったら削除
			}
		});
	}
})(jQuery);

(function($) {

if($('#fixedBox').length){

var nav = $('#fixedBox'), //メニューの高さを変数に

offset = nav.offset(); //変数「nav」のオフセット値を格納

$(window).scroll(function(){

if($(window).scrollTop() > offset.top){ //メニューの位置よりスクロール量が多くなったら

nav.addClass('fixed'); //メニューのclassに「fixed」を追加

}else{

nav.removeClass('fixed'); //メニューの位置よりスクロール量が小さくなったら削除

}

});

}

})(jQuery);

関連記事