フッターで停止する追尾メニュー

フッターで停止する追尾メニュー。
jQuery使用(1.7.2と1.9.1では動いた)
但しメニューが縦に長過ぎると見にくいので、ご利用は計画的に!!
(関数名が「オートスクロール」以外になんかいいのないかな。。。)

$(function(){
//追尾メニュー
	var nav = $('#nav');
	var footer = $("#footer");
	var navTop;
	var navBottom;
	var winTop;

	function autoscroll(){
		//後からのコンテンツの追加に対応できるよう常に計算する
		navBottom = footer.offset().top - nav.height();
		winTop = $(this).scrollTop();
		if (winTop >= navTop && winTop <= navBottom) {
			nav.css({
				position: 'fixed',
				top: '0px'
			});
		}else if(winTop <= navTop){
			nav.css({
				position: 'relative',
				top: '0px'
			});
		}else if(winTop >= navBottom){
			nav.css({
				position: 'absolute',
				top: navBottom + 'px'
			});
		}
	}

	window.onload = function() {
		navTop = nav.offset().top;
		autoscroll();
	}

	//スクロールをするたびに実行
	$(window).scroll(function () {
		autoscroll();
	});
});

3月6日追記
スクロールする度にfooter.offset().topを計算し直すように変更しました。
重くなるじゃん!と思ったけど、コンテンツが後から追加された場合に対応せねばならないので。

投稿者:

ayako0802

フロントエンドエンジニア