jquery.dimensions.js:追尾するメニューと追尾の開始・停止方法



ページを下にスクロールした時にメニューをcss等で固定するのでは無く、
JavaScriptで追尾する(後から追いかけてくる)様なjsがありましたのでご紹介します。
また、スロールの開始と停止位置の記述も記述してます。
 

JavaScript記述例

<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript" src="jquery.dimensions.js"></script>
<script type="text/javascript">

	var name = "#idKotei";	//固定するタグのid
	var str_sctop = "";
	var menuYloc = null;
	var userAgent = window.navigator.userAgent.toLowerCase();
	var appVersion = window.navigator.appVersion.toLowerCase();
	var str_start = 100;	//スクロール開始位置
	var str_end = 4000;	//スクロール停止位置

	menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
	$(window).scroll(function () {

		//開始位置から停止位置まで
		if($(document).scrollTop()>str_start && $(document).scrollTop()<str_end){
			str_sctop = $(document).scrollTop() - str_start;
			str_sctop = bchk(str_sctop);
		//停止位置以降
		}else if($(document).scrollTop()>=str_end){
			str_sctop = str_end - str_start;
			str_sctop = bchk(str_sctop);
		}else{
			str_sctop = 0;
		}

		offset = menuYloc+str_sctop+"px";
		$(name).animate({top:offset},{duration:500,queue:false});

	});

	function bchk(p_sctop){
		if (userAgent.indexOf("msie") != -1) {
		  if (appVersion.indexOf("msie 6.") != -1) {
			p_sctop = p_sctop-24;	//IE6のブラウザ誤差調整
		  } else if (appVersion.indexOf("msie 7.") != -1) {
			p_sctop = p_sctop-24;	//IE7のブラウザ誤差調整
		  } else if (appVersion.indexOf("msie 8.") != -1) {
			p_sctop = p_sctop-5;	//IE8のブラウザ誤差調整
		  } else if (appVersion.indexOf("msie 9.") != -1) {
			p_sctop = p_sctop-0;	//IE9のブラウザ誤差調整
		  }
		}
		return p_sctop;
	}

</script>

※上記の記述は実際のデモページは作ってませんので、もしかしたらコピペしても動かない可能性があります。
  その際は調整してみて下さい。

 

CSSの記述例

#idKotei{
    width: 300px;
    height: 500px;
    background-color:olive;
    position: absolute;
    top:100px;
    left: : 10px;
    padding: 20px;
}

 
ソース元:
jquery.dimensions.js – gdata-samples
Creating a Floating HTML Menu Using jQuery and CSS | Nettuts+

jsダウンロード先:
Dimensions | jQuery Plugins