////////// スクロールにあわせ、エレメントを同期 //////////

///// 変数を初期化 /////
var startPosition;//動く範囲の最小値
var endPosition;//動く範囲の最大値

var moveTargetElementId;//動かすエレメントの id 名
var containerElementId;//エレメントを動かす範囲を囲むエレメントの id名
var startPositionMargin;//ウィンドウの上部と動かすエレメントのマージン
var endPositionMargin;//ウィンドウの下部と動かすエレメントのマージン

///// スクロールされた際に、動作するイベントを設定 /////
function loadScrollElement(moveTargetElementIdArg, containerElementIdArg, startPositionMarginArg, endPositionMarginArg){
	moveTargetElementId = moveTargetElementIdArg;
	containerElementId = containerElementIdArg;
	startPositionMargin = startPositionMarginArg;
	endPositionMargin = endPositionMarginArg;
	
	var isIE = 0<=window.navigator.userAgent.indexOf("MSIE");
	if(isIE && document.compatMode=="BackCompat"){
		document.body.onscroll = scrollElement;
	}else{
		document.documentElement.onscroll = scrollElement;
	}
	
	//動く範囲の最小値
	startPosition = document.getElementById(containerElementId).offsetTop - startPositionMargin;
	
	//動く範囲の最大値
	endPosition = document.getElementById(containerElementId).offsetHeight - document.getElementById(containerElementId).offsetTop - endPositionMargin;
	
	//リロード時にあらかじめスクロールされていた場合を想定し、はじめに呼ばれた時点で実行
	scrollElement();
}

function scrollElement(){
	var scrollY = document.body.scrollTop || document.documentElement.scrollTop;//スクロールされた値を格納
	
	//最大、最小値にあわせスクロール
	if((scrollY - startPosition) > 0){
		if( scrollY < endPosition ){
			document.getElementById(moveTargetElementId).style.top = (scrollY - startPosition) + "px";
		}
	}else{
		document.getElementById(moveTargetElementId).style.top = "0px";
	}
}