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 div的大小？或者恒星也会处理这个问题吗？

无法从div启动Stellar.js

1 个答案: