フッターで停止する追尾メニュー。
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を計算し直すように変更しました。
重くなるじゃん!と思ったけど、コンテンツが後から追加された場合に対応せねばならないので。