SuperScrollorama + Greensocks动画滚动

2018-06-25 17:58:20

我在解决Javascript动画滚动问题时遇到了一些麻烦。

我使用的是建立在Greensock JS tweening库之上的SuperScrollorama Jquery插件。

我所追求的基本效果是将一个部分“固定”下来，然后使用垂直滚动来展开某些内容，然后在内容完全展开后“解除”该部分，以便用户可以滚动 - 即http：// blueribbondesign.com.au/example/

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

我一直在无休止地处理“position：fixed”和“pin-spacer”div，并尝试将Superscrollorama插件附加到各种包含元素，但仍无法解决如何使其工作。

任何来自网络的聪明人群的头脑的帮助将非常感激，

干杯，

TN。

我自己一直在处理这个问题。会发生什么情况是，将一个空白div隔离块放在该部分的上方，并将其固定在pin（）函数中定义的高度处。其次，固定元素得到一个位置：固定分配给它。这些东西都允许滚动条在元素保持粘贴的状态下继续向下。反过来，无论你下面的那个部分因为这个隔离器的高度而被撞倒。

如果您的固定元素水平居中，则首先将其左侧：50％，左侧空白： - {宽度/ 2} px，以防止它向左侧边缘推进。

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

看起来不同的技术会要求不同的修复，但这些都是我要注意的事情......固定定位，然后使用pin / unpin事件进行调整。

链接地址: http://www.djcxy.com/p/72053.html