2

我正在努力将 Skrollr 应用到客户的网站中。我正在使用这样的相对位置：

<div id="deer" data-anchor-target="#benchmark" data-200-bottom="left: -100px" data-bottom="left: 80px"></div>

但是，当我第一次加载页面时，动画似乎不起作用。但在我调整屏幕大小后（例如，在 Firefox 中打开“响应式设计视图”，或打开/关闭 Firebug），动画似乎工作正常。

此问题出现在 Firefox (Mac) 和 Google Chrome (Windows) 中。在 Chrome (Mac) 中，这个问题消失了。

请帮忙看看这个工作演示。我整天都在尝试解决这个问题:( http://goo.gl/scFwV

4

2 回答 2

3

禁用 JavaScript 并访问您的页面。您会注意到该#benchmark元素更接近顶部。原因很简单：您的图像滑块占用了空间，但 skrollr 会在此之前计算偏移量。您的动画实际上正在运行，但在动物进入您的视口之前。

结论：skrollr.init当滑块加载完成时调用。或者您可以致电refresh（https://github.com/Prinzhorn/skrollr#refreshelements）。

于 2013-07-01T17:14:41.723 回答
0

感谢普林佐恩的回答。我遇到了同样的问题，并通过为我的 Flexslider-Container 设置固定高度来修复它。

于 2014-06-11T15:26:35.213 回答