自定义 fullpage.js 以动态跳过部分

Question

问题很简单，但我无法自己制作脚本来满足我的需要... 我实际上正在使用一个脚本 ( fullpage.js ) 当你滚动 down/up 节之间。我需要制作一个从这个容器监听的脚本，并且只有当 class（在我的例子中是 fp-viewing-3 ）被添加到这个容器时才将新的 class 切换到 div （当然来自 fullpage.js 脚本）。

有什么方法可以做到吗？

Answer 1

I need to make a script that listen from this container

这不是解决问题的方法。

如果你想使用状态 class，那么只需根据之前的解释创建一个新的 class in this fullpage.js tutorial .

创建条件 CSS class，仅当其父项 class 符合您的要求时才会应用。

例如，当您在第 1 部分幻灯片 0 中时，类似这样的内容只会将 red 颜色应用于具有 myClass 的元素。

.fp-viewing-1-0 .myClass{
    color: red;
}

拥有：

<div id="fullpage">
    <div class="section"></div>
    <div class="section myClass"></div>
    <div class="section"></div>
<div>

如果出于某些其他原因（使用插件等）您确实需要动态添加 class，然后使用 fullpage.js 回调 onLeave 或 afterLoad:

$('#fullpage').fullpage({
    onLeave: function(index, nextIndex, direction){
        var destination = $('.section').eq(nextIndex - 1);
        destination.find('.my-element').addClass('myClass');            
    }
});

Answer 2

这是我的问题的解决方案。除第 2 节外，整页按预期工作。第 2 部分仅在向下滚动时可用，向上滚动时脚本将忽略它。

$(document).ready(function() {

    $('#application').fullpage({

    onLeave: function(index, nextIndex, direction){
        var destinationToIgnore = $('.fp-section').hasClass('ignore');

        if(destinationToIgnore && direction =='up'){
            var destination = nextIndex = 1
            $.fn.fullpage.moveTo(destination);

        }
    },


    afterLoad: function(anchorLink, index){
        var loadedSection = $(this);

        if(index !== 1){
         $('.section-intro').removeClass('ignore');            
        }
        if(index == 3){
         $('.section-intro').addClass('ignore');            
        }

    }

    });


});

自定义 fullpage.js 以动态跳过部分

Customizing fullpage.js to skip section(s) dynamically

toggle

fullpage.js