Javascript 缓慢滚动（视差）的背景

我有一个背景，我想视差滚动（慢滚动）作为访客上下滚动页面

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

我尝试了各种不同的方法，但都无济于事，我目前的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代码：

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

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

---

洞察力将是伟大的

似乎有一个很好的教程，这在优秀！请将您的解决方案发布为您自己问题的答案，以便其他有相同问题的人也可以找到解决方案。请查看此项目的可能副本。尊敬。如果您关心性能，则不应为此使用onscroll事件。始终使用超时并通过requestanimationframe传递逻辑。

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