页面重新加载背景位置上的 Stellar.js 错误答案

【问题标题】：Stellar.js on page reload background-position gets wrong页面重新加载背景位置上的 Stellar.js 错误
【发布时间】：2013-08-25 10:10:13
【问题描述】：

我正在使用 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 是破坏页面的原因。

知道为什么会发生这种情况，我能做些什么来防止这种情况发生吗？

想法：它与偏移量有关吗？找不到答案，需要帮助。

【问题讨论】：

看起来这是已记录但未处理。问题 #60 github.com/markdalgleish/stellar.js/issues/60

标签： javascript jquery scroll parallax background-position

【解决方案1】：

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

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

【讨论】：

同样的问题，但“背景附件：已修复”已经存在。 :-(

【解决方案2】：

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

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

为不合适的元素添加 CSS 高度和宽度属性后，问题消失了。

【讨论】：

【解决方案3】：

尝试以下方法：

responsive: true,

【讨论】：

【解决方案4】：

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

我不知道浏览器显然只在第一次进入网站时才加载头部。因此，如果您刷新页面，它不会重新加载您放在头部的 stellar.js 函数，因此它不会正确刷新背景位置值。

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

【讨论】：