使用SuperScrollorama + Greensocks进行动画滚动

Question

我在想一个Javascript动画卷轴问题时遇到了一点麻烦。

我使用的是Greensock插件，它构建在SuperScrollorama JS补间类库之上。

我想要的基本效果是向下“固定”一个部分，然后使用垂直滚动来展开一些内容，然后在内容完全展开后“解锁”该部分，这样用户就可以继续滚动了--即http://blueribbondesign.com.au/example/

但是当我试图将同样的效果一个接一个地应用于多个部分时，所有的东西都被破坏了:固定元素下面的“未固定”内容被推出屏幕，当它反向执行动画(即向上滚动页面)时，它似乎错误地计算了元素的高度。-即http://blueribbondesign.com.au/example2/

我一直在摆弄"position:fixed“和"pin-spacer”div，并尝试将Superscrollorama插件附加到各种包含元素上，但仍然无法弄清楚如何让它工作。

任何来自网络上优秀的众包思想的帮助都将不胜感激，

干杯,

TN.

Answer 1

我自己一直在处理这个问题。发生的情况是，有一个空白的div间隔符放在用您在pin()函数中定义的高度固定的节的上方。其次，固定的元素将获得一个位置:分配给它的固定位置。这两件事都允许滚动条在元素保持固定的同时继续向下滚动。反过来，你在该部分下面的任何东西都会因为间隔div的高度而被颠簸下来。

如果你的固定元素水平居中，首先给它一个左:50%，边距左：-{width/2}px，以解决它推到左边的问题。

接下来，您必须检测pin/unpin事件(由插件提供，作为“anim”的附加参数)，并更改下面的部分以切换固定/相对位置。当您将底层部分更改为固定位置时，请确保将其"top“属性设置为固定元素的高度。一旦锁定的图元变为未锁定，请将其修改回相对位置。这有什么意义吗？

似乎不同的技术需要不同的修复，但这些都是我会注意的……固定定位，然后使用pin/unpin事件进行调整。