Question

我正在使用Stellar.js v0.6.2 jQuery插件来显示6个具有视差效果的背景图像。

首次加载页面时一切正常，但如果我重新加载/刷新它，我会发现背景位置设置错误，视差效果已经破坏。

这是我使用的Stellar.js设置：

scrollProperty: 'scroll',
positionProperty: 'position',
horizontalScrolling: false,
verticalScrolling: true,
horizontalOffset: 0,
verticalOffset: 0,
responsive: false,
parallaxBackgrounds: true,
parallaxElements: true,
hideDistantElements: true,

这就是我在HTML源代码中的例子：

<section class="visible" id="contact" data-stellar-background-ratio="0.6" data-stellar-vertical-offset="200"></section>

这是第一次打开页面时背景位置的正确显示方式：

<section class="visible" id="contact" data-stellar-vertical-offset="200" data-stellar-background-ratio="0.6" style="background-position: 30px 82.4701px;"></section>

这是我刷新页面时的样子：

<section class="visible" id="contact" data-stellar-vertical-offset="200" data-stellar-background-ratio="0.6" style="background-position: 30px -305.2px;"></section>

如您所见，负值-305.2px是破坏页面的内容。

知道为什么会发生这种情况，我该怎么做才能防止这种情况发生？

思考：是否与抵消相关？找不到答案，需要帮助。

Answer 1

我遇到了类似的问题，但定位的图像元素而不是背景图像。

我的初步解决方案是将我的特定代码从$(document).ready()事件移至$(window).load()。这让我意识到，当DOM准备好时，图像尺寸不可用于恒星。

为场外元素添加CSS高度和宽度属性后，问题就消失了。

Answer 2

遇到同样的问题。要解决此问题，请将background-attachment: fixed;添加到元素的css中。

来源：http://markdalgleish.com/projects/stellar.js/docs/

Answer 3

尝试以下方法：

responsive: true,

Answer 4

我遇到了同样的问题。我的错误是，我把我的javascript调用了我的stellar.js函数到文档的头部;而不是把它放入体内！

我没有意识到浏览器只是在第一次输入网站时才加载头部。因此，如果您刷新页面，它将不会重新加载您放在头部的stellar.js函数，因此它将无法正确刷新背景位置值。

通过将javascript添加到正文中，您可以确保每次刷新页面时都重新加载脚本。

页面重新加载背景位置的Stellar.js出错了

4 个答案: