响应式网站的 Scrollorama 视差

Question

我正在一个网站上尝试使用 js 插件 scrollorama - http://johnpolacek.github.io/scrollorama/

我已经在网站上很好地设置了插件，除了我的 div 以百分比完成并根据窗口大小调整大小，显然它不适用于视差插件。插件绝对定位 div 并给出以像素为单位定义的 'top' 属性。在调整大小时它不会改变，它会导致 div 在它们之间有间隙。

我在另一个 SO 问题上发现了一个可能的解决方案，但是在尝试更改以适用于我的网站时，它似乎没有做任何事情。这是插件js——Pastebin JS

SO Question

总的来说，我想向 div 部分添加一个类，并根据屏幕大小/百分比计算必要的 css 属性。

我还注意到控制台日志中有一个错误，它可能也会影响某些事情——未捕获的类型错误：无法读取未定义的属性“pin”——在第 313 行

Answer 1

最后一点，我还遇到了“Uncaught TypeError: Cannot read property 'pin' of undefined”错误——问题是在我最初的 scrollorama 调用中，我已经定位了我想要动画的块。

为了解决这个问题，我添加了一个名为#blocks 的父容器来容纳所有单独的块，然后这样调用它：

var scrollorama = $.scrollorama({
    blocks: '#blocks'
});