0

我正在尝试将 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
    });

我可以看到该部分内的视差图像显示：无，但除此之外，脚本似乎没有运行。我没有 JS 错误。

4

1 回答 1

0

我认为这可能与您使用position: absolute而不给 div 任何东西有关。

你检查过你的#contentdiv的大小吗？或者恒星也处理这个？

于 2012-09-03T10:15:03.830 回答