Fullpage.js

Question

我已经部分编写了代码，但我不确定在 if 和 else 部分之后放什么。我想做的是 - 每当一个部分有 class "four" 和 "active" 时，我想禁用 fullpage.js 的 FitToSection 选项。 Fullpage.js 有一个我正在使用的内置 setFitToSection 布尔值。这是我目前拥有的，我还需要什么？

$(document).ready(function () {
    if ($('.four').hasClass('active') === true) {
        $.fn.fullpage.setFitToSection(false);
    } 
    else {
        $.fn.fullpage.setFitToSection(true);
    }
});

Answer 1

只需使用 fullpage.js 提供的回调，例如 afterLoad 或 onLeave:

$('#fullpage').fullpage({
    autoScrolling:false,

    onLeave: function(index, nextIndex, direction) {
        var destination = $('.fp-section').eq(nextIndex - 1);

        if(destination.hasClass('four')){
           $.fn.fullpage.setFitToSection(false);
           console.log("setting fitToSection off");
        }else{
            $.fn.fullpage.setFitToSection(true);
            console.log("setting fitToSection on");
        }
    }
});

Example online

在这种情况下，您不需要检查 active class，因为目标部分始终会有它。只需检查它是否有 four class.

同一脚本的较短版本可以是：

$('#fullpage').fullpage({
    autoScrolling:false,

    onLeave: function(index, nextIndex, direction) {
        var destination = $('.fp-section').eq(nextIndex - 1);
        $.fn.fullpage.setFitToSection(!destination.hasClass('four'));
    }
});

Fullpage.js - 'setFitToSection' 选项的设置值基于 div 是否具有某个 class

Fullpage.js - Setting value for 'setFitToSection' option based on if a div has a certain class

javascript

jquery