Question

使用fullPage.js，当窗口大小低于767px时，我使用下面的代码禁用了该插件。它工作正常，但当我从767px以下将其调整为960px时，该插件无法正常工作。任何人都可以在调整大小后帮助重启插件吗？

JS： function fullPageScroll（）{ $（ '＃主'）。全页（{ 导航：true }）; }

var $win = $(window).width();

if ( $win > 767 ) {
    fullPageScroll();
} else {
    fullPageScroll();
    $.fn.fullpage.destroy('all');
}

Answer 1

因为你还需要在resize事件上应用它：

//first call when loading the site
doneResizing()

var resizeId;
//calling the function again  on resize so we can get the new width
$(window).resize(function () {
    //in order to call the functions only when the resize is finished
    clearTimeout(resizeId);

    resizeId = setTimeout(doneResizing, 500);
});

//your original code
function doneResizing() {
    var $win = $(window).width();

    if ($win > 767) {
        fullPageScroll();
    } else {
        fullPageScroll();
        $.fn.fullpage.destroy('all');
    }
}

Answer 2

只需使用此

@media (max-width:767px){
    #scroll-section{
        transform: translate3d(0px, 0px, 0px) !important;
    }
    body {
        overflow: auto !important;
    }
}

当浏览器窗口从移动设备调整到平板电脑时，如何启动插件FullPage.js？

2 个答案: