2

我有一个包含多个 div 的 HTML 页面。每个 div 都有自己的部分。我的要求是最初加载包含所有部分的页面。然后自动滚动页面，以便第一个 div 部分的标题固定并且内容滚动。在其内容的末尾，第二节标题占据了第一节标题的位置，现在第 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 回答