エリア内背景画像をスクロールに応じて移動

/**
 * 背景画像をスクロールに応じて移動
 *

<style>
#wrapper01a {
	width: 100%;
	height: 500px;
	background-image: url(./image/newsback.jpg);
	background-size: 100%;
	background-position: 0 50%; <--- この50%にあたる部分を0～100%で変化させる
}
</style>

<div id="wrapper01a"><div id="wrapper01b">
	content
	content
	content
	content
</div></div>
<div id="wrapper03a"><div id="wrapper03b">
	content
	content
	content
	content
</div></div>

<script>
var depthback = [{'id':'wrapper01a','height':500},{'id':'wrapper03a','height':400}];
</script>
<script src="js/depthback.js"></script>

 *
 * @author ao-system
 */
(function(window,document,depthback){
	init();
	function init() {
		onScroll();
		document.addEventListener('scroll',function(){onScroll();},false);
	}
	//要素の位置を返す
	function offsettop(elm) {
		var offsettop = elm.offsetTop;
		if (elm.offsetParent) {
			while (elm = elm.offsetParent) {
				offsettop += elm.offsetTop;
			}
		}
		return offsettop;
	}
	//スクロール位置を返す
	function scrolltop() {
		if (document.body && document.body.scrollTop) {
			return document.body.scrollTop;
		}
		if (document.documentElement && document.documentElement.scrollTop) {
			return document.documentElement.scrollTop;
		}
		if (window.pageYOffset) {
			return window.pageYOffset;
		}
		return 0;
	}
	function onScroll() {
		for (var i = 0; i < depthback.length; i++) {
			(function(obj){
				render(obj.id,obj.height);
			})(depthback[i]);
		}
	}
	function render(idStr,elmHeight) {
		var elmY = offsettop(document.getElementById(idStr));
		var posY = scrolltop();
		var cH = document.documentElement.clientHeight;	//画面内高さ
		var y = parseInt((elmY - posY + elmHeight) / (cH + elmHeight) * 100);
		document.getElementById(idStr).style.backgroundPosition = '0 ' + y + '%';
	}
})(window,document,depthback);