fullpage.js配合bootstrap制作响应式网站

一、需求：在PC端使用全屏滚动效果，移动端使用浏览器自带滚动条取消全屏滚动。

二、难点：

　　1、fullpage只能初始化一次，

　　2、在移动端,当取消全屏滚动，每一屏高度自动；浏览器滚动条上下滚动时页面会自动向上或者向下滚动一点点

　　3、在手机自带浏览器（除微信浏览器和QQ浏览器外）滑动时会自动回到顶部，有时是向上滑动时回到顶部。

三、解决办法

     1）在页面加载完的时候初始化一次，使用setAllowScrolling（）设置属性，在移动端取消全屏滚动====》导致难点2

$(function(){

　　$('#fullpage').fullpage({
                navigation: true, //不显示项目导航
                resize: true, //字体随着窗口缩放而缩放
                scrollBar: true,
                // anchors: ['section1', 'section2', 'section3', 'section4', 'section5', 'section6', 'section7'],
                afterRender: function () {
                    wow = new WOW({
                        animateClass: 'animated',
                        mobile: false
                    });
                    wow.init();
                }

           });

});

　　　　var $win = $(window).width();
　　　　/*屏幕可见区域小于1024时，关闭全屏滚动，使用自带的滚动条*/
　　　　if ($win < 1024) {
  　　　　　　  $.fn.fullpage.setAllowScrolling(false);
　　　　} else {
 　　　　　　   $.fn.fullpage.setAllowScrolling(true);
　　　　}

 

2）为了解决移动端页面会自动上滚或者下滚一点点的问题，发现设置属性不能解决问题，就想到了destroy();pc端才初始化fullpage

 var $win = $(window).width();
        /*屏幕可见区域小于1024时，关闭全屏滚动，使用自带的滚动条*/if ($win < 1024) {
                $.fn.fullpage.destroy('all'); //移动端销毁全屏滚动（可以得到效果，但是窗口由pc端变为移动端时控制台会报错）
        } else {
            $('#fullpage').fullpage({ // pc端才初始化fullpage
                navigation: true, //不显示项目导航
                resize: true, //字体随着窗口缩放而缩放
                scrollBar: true,
                // anchors: ['section1', 'section2', 'section3', 'section4', 'section5', 'section6', 'section7'],
                afterRender: function () {
                    wow = new WOW({
                        animateClass: 'animated',
                        mobile: false
                    });
                    wow.init();
                }

            });
        }

报错：

 

 

 

3）最终解决办法

var timeout；

$(window).resize(function () {
    autoScrolling();//必须放在这里，否则autoScrolling会在setAutoScrolling之前执行，拿不到setAutoScrolling
    // caseScroll();
    // carouselTop();
    clearTimeout(timeout);
    // timeout = setTimeout(function () { window.location.reload(); }, 100); // 若是不使用下面的根据尺寸变化来决定是否初始化fullpage,使用刷新方式也能解决；但是只要窗口变化就会刷新页面，不太友好。
});

function autoScrolling() {

var $win = $(window).width();
        /*屏幕可见区域小于1024时，关闭全屏滚动，使用自带的滚动条*/
        if ($win < 1024) {
　　　　　　　　try{

　　　　　　　　　　 $.fn.fullpage.destroy('all'); //移动端销毁全屏滚动（有点投机，但是可以得到效果，不报错）

　　　　　　　　}catche(e){}      
        } else {
            $('#fullpage').fullpage({ // pc端才初始化fullpage
                navigation: true, //不显示项目导航
                resize: true, //字体随着窗口缩放而缩放
                scrollBar: true,
                // anchors: ['section1', 'section2', 'section3', 'section4', 'section5', 'section6', 'section7'],
                afterRender: function () {
                    wow = new WOW({
                        animateClass: 'animated',
                        mobile: false
                    });
                    wow.init();
                }

            });
        }
}

总结：以上就是我得到的解决方案，有点投机取巧；但是效果是达到了。。各位还有其他好的解决办法可以评论给我哦，一起分享，共同进步呀！