5

我有一个背景，我想在访问者上下滚动页面时进行视差滚动（慢速滚动）。

背景图像高度为 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 代码：

<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图像......

洞察力会很棒！

4

0 回答 0