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