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

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

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

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