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是页面遗失的原因。

任何想法为什么发生这种情况，我能做些什么来防止这种情况？

THOUGHTS：是否与偏移有关？找不到答案，需要帮助。

Answer 1

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

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

Answer 2

我有同样的问题。我的错误是，我把我的JavaScript调用我的stellar.js函数放入文档的头部;而不是把它放进身体！

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

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

Answer 3

我遭受类似的问题，但与定位的图像元素，而不是背景图像。

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

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

Answer 4

尝试以下操作：

responsive: true,