fullpage.jsをカスタマイズして動的にセクションをスキップする

Question

質問は簡単ですが、自分でスクリプトを作成することはできません... 私は実際にスクリプト（fullpage.js）を使用していますセクション間を上下にスクロールすると、いくつかのクラスをコンテナに切り替えることができます（私の場合、fp-viewing-1からfp-viewing-xに切り替える）。 クラス（私の場合はfp-viewing-3）が（もちろんfullpage.jsスクリプトから）このコンテナに追加されたときだけ、このコンテナをリッスンして新しいクラスをdivに切り替えるスクリプトを作成する必要があります。

これを行う方法はありますか？

Answer 1

これは私の問題の解決方法です。 セクション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');    
     } 

    } 

    }); 


}); 

Answer 2

は、私はそれのために行く方法はありません。このコンテナ

から聞くスクリプトを作成する必要があります。

ステータスクラスを使用する場合は、in this fullpage.js tutorialのように以前のものに基づいて新しいクラスを作成してください。

親クラスが要件に一致する場合にのみ適用される条件付きCSSクラスを作成します。いくつかのため

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

場合：あなたが持つセクション1スライド0

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

にあるとき

このような何かは、例えば、唯一のmyClassを持つ要素にred色を適用しますあなたが実際にクラスを動的に追加する必要がある他の理由（プラグインの使用など）、次にfullpage.jsコールバックonLeaveまたはafterLoad：

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