无法从div启动Stellar.js

Question

我正在尝试将Stellar.js (http://markdalgleish.com/projects/stellar.js/)实现到我正在开发的站点。我意识到我需要将视差滚动封闭在容器中，而不是使用窗口/主体，以便它在iPad上工作(考虑到视口)，这就是我遇到问题的地方；脚本似乎不能正确启动。

这是我在网站上设置的结构-

HTML

    <header></header>
        <!-- keeping this content outside of #content because of a prefixed alignment -->

        <div id="content">

        <section id="example" data-stellar-background-ratio="1">
            <img src="example-1.png" data-stellar-ratio="2" data-stellar-offset="-25">
            <img src="example-2.png" data-stellar-ratio="3" data-stellar-offset="-50">
            <img src="example-3.png" data-stellar-ratio="4" data-stellar-offset="0">
        </section>

    </div>

CSS

    #content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

section {

        background-attachment: fixed;
        width: 100%;
        height: 100%;
        position: relative;
    }
        img:first-child {
            position: absolute;
            top: 0;
            left: 300px;
        }
        img:nth-child(2) {
            position: absolute;
            z-index: 99;
            top: 0;
            right: 150px;
        }
        img:nth-child(3) {
            position: absolute;
            z-index: 99;
            top: 0;
            left: 100px;
        }

JavaScript

 $('#content').stellar({
        horizontalScrolling: false
    });

我可以看到部分中的视差图像显示为: none，但除此之外，脚本似乎没有运行。我没有收到JS错误。

Answer 1

我在想，这可能与你使用position: absolute而不给div任何与有关。

你检查过你的#content分区的大小了吗？还是说星空也会处理这件事？