2

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

我正在使用构建在 Greensock JS 补间库之上的 SuperScrollorama Jquery 插件。

我所追求的基本效果是“固定”一个部分，然后使用垂直滚动来展开一些内容，然后在内容完全展开后“取消固定”该部分，这样用户就可以滚动 - 即http:// blueribbondesign.com.au/example/

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

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

非常感谢来自网络优秀众包思想的任何帮助，

干杯，

田纳西州。

4

1 回答 1

4

我自己一直在处理这个问题。发生的情况是在被固定的部分上方放置了一个空白 div 间隔，其高度是您在 pin() 函数中定义的高度。其次，固定的元素获得一个位置：固定分配给它。这两件事都允许滚动条在元素保持固定的同时继续向下滚动页面。反过来，由于该间隔 div 的高度，您在该部分下方的任何内容都会被撞倒。

如果您的固定元素水平居中，首先给它一个 left:50%, margin-left:-{width/2}px 以修复它推向左边缘。

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

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

于 2012-06-30T23:48:03.197 回答