javascript - スロー スクロール (視差) 背景

Question

訪問者がページを上下にスクロールするときに視差スクロール（スロースクロール）をしたいという背景があります。

背景画像は高さ 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>

CSS コード:

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

現在、JS コードは機能しません。背景画像すら動かない…

洞察力は素晴らしいでしょう！