如何使用fullpage.js实现锤子手机的首屏和尾屏的效果？

fullpage.js是一个很好的一页式幻灯片效果插件，但是默认只有一屏一屏的滚动功能。我想知道如何能够使用它实现类似锤子手机页面的首屏和尾屏的效果呢？
1. 首屏有头部，滚动鼠标才切换到第一屏，头部隐藏；
2. 尾屏有个附加信息的底部，在最后一屏滚动鼠标，底部才显示出来。
演示效果：http://www.smartisan.com/#/overview

如果给底部加通底<div class="section fp-auto-height"></div>亲测有效！

修改一下滚动相关代码，判断当前页面应该就好了，参考：http://www.gbtags.com/gb/gbliblist/84.htm

参考这个实现方式http://jsfiddle.net/reddy887/o4uywjrn/

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.9/jquery.fullPage.min.css">
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.9/vendors/jquery.easings.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.9/jquery.fullPage.min.js"></script>
    <script type="text/javascript">
        $(function()
        {
            // 由于 fullpage 没设置事件队列池清空方法，导致划屏操作会重复，发生跳页现象
            // 使用 alert 结束事件队列，考虑到用户体验，我设计了一个延迟锁定器来结束队列
            // fullpage 官网地址 https://github.com/alvarotrigo/fullPage.js/
            // 我太忙，使用这个代码的用户请到 github 提交一个 issues 请开发者加入 clearEvents 方法
            // 作者 jielie@foxmail.com 欢迎交流
            var timer;
            var flag    = true;
            function lock()
            {
                clearTimeout(timer);
                flag    = false;
                timer    = setTimeout(function()
                {
                    flag= true;
                }, 200);                
            }

            $('#fullpage').fullpage(
            {
                sectionsColor    :            // 背景色
                [
                    '#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'
                ],    
                navigation        : true,        // 显示导航
                loopBottom        : true,        // 顶部轮滚
                loopTop            : true,        // 顶部轮滚
                css3            : true,        // 开启CSS3动画

                onLeave            : function( index, nextIndex, direction )
                {
                    var box    = $("#box");

                    // 顶部
                    if ( index===1 && nextIndex===4 )
                    {
                        box.addClass("top");
                        return false;
                    }
                    if ( index===1 && nextIndex===2 && box.hasClass("top") )
                    {
                        lock();
                        box.removeClass("top");
                        return false;
                    }

                    // 底部
                    if ( index===4 && nextIndex===1 )
                    {
                        box.addClass("bottom");
                        return false;
                    }
                    if ( index===4 && nextIndex===3 && box.hasClass("bottom") )
                    {
                        lock();
                        box.removeClass("bottom");
                        return false;
                    }

                    // 返回事件阻塞
                    return flag
                }
            })    
        })
    </script>

    <style type="text/css">
        #box
        {
            transition: all 1000ms cubic-bezier(0.86, 0, 0.07, 1);
            -webkit-transition: all 1000ms cubic-bezier(0.86, 0, 0.07, 1);
        }

        #box.top
        {
            transform: translate3d(0px, 200px, 0px);
            -webkit-transform: translate3d(0px, 200px, 0px);
        }

        #box.bottom
        {
            transform: translate3d(0px, -200px, 0px);
            -webkit-transform: translate3d(0px, -200px, 0px);
        }
    </style>
</head>
<body>

    <div id="box">
        <div id="fullpage">
            <div style="height:200px; background:red"></div>

            <div>
                <div class="section">
                    <h3>第一屏</h3>
                </div>
                <div class="section">
                    <h3>第二屏</h3>
                </div>
                <div class="section">
                    <h3>第三屏</h3>
                </div>
                <div class="section">
                    <h3>第四屏</h3>
                </div>
            </div>

            <div style="height:200px; background:blue"></div>
        </div>
    </div>

</body>
</html>

这个简单撒，直接CLASS加个属性就OK了他插件自带的属性比如你的尾页友情链接是这个
<div class="section fp-auto-height"> 加一个这个CLASS就行了：fp-auto-height 亲测有用

前两天刚好也做了一个类似的页面,这种第一屏和最后一屏的部分滚动通过把滚动的距离改成navbar或者footer的高度就可以实现,但是fullpage好像没有单独的设置来修改每一次滚动的距离,所以你可能要稍微改一下他的js.判断是否第一/最后一屏,然后算一下高度就OK.

问题解决了吗
正好也遇到了

解决了的给个答案把。。在线等，挺急的

能看下你们改好的成品吗？

【热门文章】