2

複数のdivを持つHTMLページがあります。各divには独自のセクションがあります。私の要件は、最初にすべてのセクションを含むページをロードすることです。次に、ページを自動スクロールして、最初のdivセクションのヘッダーが固定され、コンテンツがスクロールされるようにします。その内容の終わりに、2番目のセクションヘッダーが最初のセクションヘッダーの場所を占め、セクション2のコンテンツがスクロールします。次に、3番目のセクションヘッダーが2番目のヘッダーの代わりになり、セクション3の自動スクロールの内容が続きます。すべてのセクションの終わりに、セクション1から始まります。これを達成する方法について誰かが私を助けてくれますか？

以下は私のコードリンクです、 http：//pastebin.com/EAYtsWAT

自動コンテンツスクロールにjsscrollerを使用しています。コンテンツをスクロールすることはできますが、ヘッダーActivity1を固定してコンテンツをスクロールし、そのヘッダーを削除してActivity2ヘッダーに置き換え、コンテンツをスクロールする方法がわかりません。

4

2 に答える 2

2

あなたが提供したコードでいくつかのハウスキーピングを行った後（そしてそれをjsfiddleに移動した後）、これは（私が思うに）あなたが望むことをする何かです。

jscrollerの機能は比較的制限されているため、いくつかの調整を適用してまとめる必要がありました。

function SectionManager(){
    this.currentSection = null;
    this.sections = $("#content .section");
    this.numSections = this.sections.length;

    this.transition = function (current){
            //SCROLLER CODE STARTS HERE....
             $jScroller.config.refresh = 100;
            // Add Scroller Object
            $jScroller.config.obj = [];
            $jScroller.add(
                "#content .section.active .activityTbl",
                "#content .section.active .activityTbl > table",
                "up",
                3
            );
            // Start Autoscroller
            $jScroller.start();
            $jScroller.cache.init = true;
            //SCROLLER CODE ENDS HERE....
    };
    this.callback = function (){
        this.currentSection = (this.currentSection != null)
            ? (this.currentSection + 1) % this.numSections
            : 0
        ;
        $("#content .section").removeClass("active");
        $("#content .section:eq(" + this.currentSection + ")").addClass("active");
        this.transition();
    }

    this.run = function(){
        this.callback();
    };

}

manager = new SectionManager();
manager.run();

特に、$ jScroller.scroll関数を上書きして、終了時に起動する非同期コールバックを含める必要がありました。これにより、マネージャーのコールバック関数がトリガーされ、スクロール機能が次のセクションに移動します。

編集：詳細については、jsfiddleを参照してください

于 2013-03-01T15:21:37.493 に答える
0

Scrolloramaを使用できるようです。他の要素（コンテンツ）は通常どおりスクロールしますが、スクロールに応じてピン留めとピン留め解除を行うことができます。

于 2013-03-01T01:31:38.330 に答える