慢滚动（视差）背景

Question

我有一个背景，我希望Parallax滚动（慢滚动），因为访问者在页面上下滚动。

背景图像的高度为1200像素（宽度为800像素），我希望根据页面内容（文档）大小调整滚动速度。换句话说，我希望访问者能够看到（最终）完整的背景图像，因为当他们击中页脚时向下滚动查看图像的底部。

我尝试了各种不同的方法无济于事，目前的js代码是：

function calcParallax(tileheight, speedratio, scrollposition) {
return ((tileheight) - (Math.floor(scrollposition / speedratio) % (tileheight+1)));
}

window.onload = function() {

window.onscroll = function() {
var posY = (document.documentElement.scrollTop) ? document.documentElement.scrollTop : window.pageYOffset;

var ground = document.getElementById('bg');
var groundparallax = calcParallax(53, 8, posY);
ground.style.backgroundPosition = "0 " + groundparallax + "px"; 

}
}

HTML code：

<div id="bg" class="movable" >
...all content code...
</div>

CSS代码：

 #bg {
background:url("../images/cave-background.jpg") no-repeat fixed 50% 0;
background-repeat: no-repeat;
background-attachment: fixed;
}

目前JS代码甚至不起作用。它甚至没有移动bg图像...

洞察力会很棒！