Question

我有一个包含多个div的HTML页面。每个div都有自己的一部分。我的要求是最初加载所有部分的页面。然后自动滚动页面，以便第一个div部分固定其标题和内容滚动。在其内容的末尾，第二部分标题占据第一部分标题位置，现在第2部分的内容滚动。然后第三部分标题取代第二部分和第3部分自动滚动的内容，依此类推。在所有部分的最后，它再次从第1节开始。任何人都可以帮助我如何实现这一目标吗？

以下是我的代码链接， http://pastebin.com/EAYtsWAT

我正在使用jsscroller进行自动内容滚动。我能够滚动内容，但我不知道如何保持标题Activity1固定而不是滚动其内容，然后删除该标题并将其替换为Activity2标题，滚动其内容等等。

Answer 1

在对您提供的代码（并移动它to 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 for details

Answer 2

听起来你可以使用Scrollorama。您可以根据滚动来固定和取消固定内容，而其他元素（内容）可以正常滚动。

多个div使用固定的标题/标题一个接一个地自动滚动

2 个答案: