javascript - 响应式网站的 Scrollorama Parallax

Question

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

我已经在网站上很好地设置了插件，除了我的 div 是按百分比完成的并根据窗口大小调整大小，显然它不能很好地与视差插件一起工作。插件绝对定位 div 并以像素为单位定义“顶部”属性。在调整大小时它不会改变，它会导致 div 在它们之间有间隙。

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

SO Question

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

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

Answer 1

对于最后一点，我还遇到了“未捕获的类型错误:无法读取未定义的属性‘pin’”错误——问题是在我最初的 scrollorama 调用中，我瞄准了我想要动画的 block 。

为了修复它，我添加了一个名为#blocks 的父容器来容纳所有单独的 block ，然后这样调用它:

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