StellarJs 视差背景图像不起作用

Question

I know there are other similar questions on this, believe me, I have been at this for almost two days now.

I am trying to use StellarJs to create a parallax background image in the header of my website. Unfortunately, it is having no effect whatsoever on the element with the specified data-stellar-background-ratio .

Here is a demo (with a different bg image than on my local machine).

I even made a version exactly like the example on the website and it still would not work. I looked into solutions on 4 other similar questions, none of which helped me. I'm at a loss here.

Answer 1

Okay, so I can't speak to your local copy but I know that at least this one 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 to see if there are any syntax issues you're missing.

Answer 2

After punching a few holes in the drywall I realized that the problem had nothing to do with the element in question or the way I was calling the stellar function. It had to do with this little piece of CSS right here:

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

It seems you cannot apply a height of 100% to the html and body tags, because after removing that height declaration, it works like a charm! I'm so confused as to why, and I will be contacting the creator of StellarJs to see if it is a bug or if it is intentional/expected behavior for some reason that I am overlooking.

The work-around for the height 100% issue can be found here: height: 100% or min-height: 100% for html and body elements?