StellarJs 视差背景图像不起作用

Question

我知道还有其他类似的问题，相信我，我已经问了将近两天了。

我正在尝试使用 StellarJs 在我网站的 header 中创建视差背景图像。不幸的是，它对具有指定 data-stellar-background-ratio.

的元素没有任何影响

Here is a demo（背景图片与我本地机器上的不同）。

我什至做了一个和网站上的例子一模一样的版本，还是不行。我研究了其他 4 个类似问题的解决方案，none 对我有帮助。我在这里不知所措。

Answer 1

好的，所以我不能与您的本地副本通话，但我知道至少这个 I fixed by moving the Stellar source code to an external resource and then adding a missing ); at the end of the $(document).ready() function and fixing that syntax error. You may want to check your local version to see if you have something similar, and check your dev tools' console 看看您是否遗漏了任何语法问题。

Answer 2

在石膏板上打了几个洞后，我意识到问题与有问题的元素或我调用 stellar 函数的方式无关。它与此处 CSS 的一小部分有关：

html, body {
    overflow-x: hidden;
    height: 100%;
}

您似乎无法将 100% 的高度应用到 html 和 body 标签，因为删除该高度声明后，它就像一个魅力！我很困惑为什么，我会联系 StellarJs 的创建者，看看它是否是一个错误，或者它是否是 intentional/expected 出于某种原因我忽略的行为。

可在此处找到高度 100% 问题的解决方法：height: 100% or min-height: 100% for html and body elements?

StellarJs 视差背景图像不起作用

StellarJs parallax background image not working

html

css

jquery

stellar.js