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
    });

セクション内の視差画像が display: none になっていることがわかりますが、それ以外はスクリプトが実行されていないようです。JS エラーは発生しません。

4

1 に答える 1

0

私はそれがあなたが使用しposition: absoluteていて、divを何も与えていないことに関係があるのではないかと考えています。

#contentdivのサイズを確認しましたか？それとも恒星もこれを処理しますか？

于 2012-09-03T10:15:03.830 に答える