6

我正在尝试使用 JavaScript 重新创建具有视差效果的网站。这意味着我有两个或更多层，它们在滚动时以不同的速度移动。

在我的情况下，我只移动一层，另一层保持静态：第 1 层 = 网站文本；第 2 层 = 元素背景；

为此，我使用简单的源代码（使用 jQuery 1.6.4）：

var docwindow = $(window);

function newpos(pos, adjust, ratio){
   return ((pos - adjust) * ratio)  + "px";
}

function move(){
   var pos = docwindow.scrollTop();
   element.css({'top' : newpos(pos, 0, 0.5)});
}

$(window).scroll(function(){
   move();
});

问题： - 所有计算都正确完成，效果按预期“起作用”。但是在某些浏览器（Chrome MAC/Windows、Opera MAC、IE，矛盾的是不是 Safari）下存在一些性能故障。

滚动时我看到了什么？- 滚动时背景与滚动一起向一个方向移动，但似乎偶尔会前后跳跃几个像素，这会产生非常令人不安的效果（不流畅）。

我尝试过的解决方案： - 添加一个计时器来限制滚动事件 - 使用持续时间短的 .animate() 方法而不是 .css() 方法。

我还观察到，使用 .scrollTo 方法（scrollTo jQuery 插件）时动画很流畅。所以我怀疑触发滚动事件（太快）有问题。

您是否观察到相同的行为？知道怎么解决吗？你能发布一个更好的解决方案吗？

感谢所有回复

编辑#1：在这里您可以找到 jsfiddle 演示（带计时器）：http: //jsfiddle.net/4h9Ye/1/

4

1 回答 1

11

我认为您应该改用 scrollTop() 并将背景位置更改为fixed。问题是，将其设置为绝对会使其在您向上或向下滚动时默认移动。

发生闪烁是因为位置已作为默认浏览器滚动的一部分更新，并作为脚本的一部分再次更新。这将呈现两个位置，而不仅仅是您想要的位置。固定，除非你告诉它，否则背景永远不会移动。

我在http://jsfiddle.net/4h9Ye/2/为您创建了一个演示。

于 2012-01-25T18:58:13.327 回答