1

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

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

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

4

4 回答 4

3

遇到同样的问题。为了解决这个添加background-attachment: fixed;到元素的css。

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

于 2013-12-02T09:48:53.840 回答
3

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

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

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

于 2014-10-22T04:55:03.870 回答
1

尝试以下操作：

responsive: true,
于 2014-12-03T07:00:00.677 回答
0

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

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

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

于 2014-06-27T15:33:22.157 回答