jQuery Parallax - 元素没有在这里结束，而是开始

Question

我目前正在开发一个视差插件，以帮助创建垂直滚动网站之一，其中某些元素会创建视差效果。

大多数插件使用巨大的 DIV 标签并滚动背景。就我而言，这是行不通的，因为客户希望动画角色 Sprite 和各种其他元素具有视差 - 就像内容一样。因此，我需要移动元素本身，而不是移动背景。我还没有找到可以做到这一点的插件。

我的插件运行得非常好，除了一个异常(exception)。随着紧张或沉重的滚动，元素会在页面上爬行 - 而不是在垂直开始的地方结束。这是一个示例(请原谅可怕的样式，这是一个粗糙的模型):http://www.nebulus.org/parallax-test

哦，正在进行的插件在这里:http://www.nebulus.org/parallax-test/js/libs/jquery.scrollParallax.js

如果您快速向上/向下滚动，您会注意到页面顶部的 Sprite 最终距离它们开始的位置很远。有人知道如何让他们表现得更好吗？非常感谢您的帮助 - 我确实计划在完成后发布该插件(轻推，眨眼)。

Answer 1

对于位置的微小变化 (containerScrollY1-containerScrollY2) = 1 或 -1，您会遇到舍入问题

newY = myPosY + (containerScrollY1-containerScrollY2)*params.inertiaY;
$base.css('top',newY+'px');

如果inertia = 0.25然后向下滚动一个像素，then new = old - 0.25到哪些楼层old - 1如果向上滚动一个像素，则 new = old + 0.25到哪些楼层old因此，对于单个像素的任何滚动(我记录了很多尝试您的代码的情况)，向下滚动时对象会向上移动一个，而向上滚动时则根本不会移动。

对于位置的大变化(您谈到的快速滚动)，问题源于仅移动可见的对象。如果删除 isVisible内部状况handleScrolling ，快速滚动问题就消失了(只要每次滚动足够大，以避免上面的舍入问题)。例如，滚动 100 像素会导致离屏 20 像素的对象在未记录的跳跃中移动 80 像素(即，其 myPosY 不同步 80 像素)。

为了解决这两个问题，我会将对象的原始位置存储为参数，然后始终根据该绝对位置计算其视差位置。如newY = params.origY - $(params.container).scrollTop()*inertiaY这对我有用。祝你好运!

此外，http://johnpolacek.github.com/scrollorama/非常好，如果你还没有尝试过的话，它还有视差。但不知道它是否适合您的具体情况。