I'm working on a site based on this: <http://inner.geek.nz/javascript/parallax/>

All's well except I'm getting a jump down (by whatever px is set in `calcParallax(xx, x, posY)`)
on scroll. This number should be where the image ends not where it begins — it should begin `scrollTop` or 0. Not sure what I'm doing wrong, I've pretty much taken the structure verbatim from the above link without the `#cloud` object or relevant script.

Here's what I have:

```
    <script type="text/javascript">
function calcParallax(tileheight, speedratio, scrollposition) {
 return ((tileheight) - (Math.floor(scrollposition / speedratio) % (tileheight+1)));
}

window.onload = function() {

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

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

  document.getElementById('javascriptcode').onscroll = function() {
    var posX = (this.scrollLeft) ? this.scrollLeft : this.pageXOffset;
    var j = calcParallax(53, 16, posX);
    console.log('scroll js: '+ j);
    document.getElementById('javascriptcode').style.backgroundPosition = j + "px 0";
  }
}

</script>

```

Any help would be much appreciated