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 回答