fullpage.js - クリック時のセクション間にダイナミックセクションを追加

Question

新しいセクションを作成して前のセクションの下に配置し、別のファイルのコンテンツを呼び出してスクロールします。私はそれを動作させることができますが、JSが新しいセクションを認識せず、scrolloverFlowで調整しないコンテンツを取り込むときに問題があります。これを実現するために使用しているコードは次のとおりです。私はそれを破壊して再構築するはずですが、新たに作成されたセクションの新しい高さを調整するために再構築することはできません。どんな助けも素晴らしいだろう。

HTML：

<div id="fullpage"> 
    <div class="section" id="section0">Sec0</div> 
    <div class="section" id="section1">Sec1 
    <ul> 
     <li><span id="addSection">Add Section</span></li> 
    </ul> 
    </div> 
    <div class="section"></div> 
</div> 

JS：コメントについて

$(document).ready(function(){ 
    function fullPageInit() { 
    $('#fullpage').fullpage({ 
     navigation: true, 
     navigationPosition: 'right', 
     scrollOverflow: true, 
    }); 
    }; 

    fullPageInit(); 

    $(document).on('click', '#addSection', function(){ 

    if($('#section2').length) { 
     $('#section2').remove(); 
    } 

    $('#section1').after('<div class="section" id="section2">New Content goes here</div>'); 
    $('#section2').load('content.php); 

    $.fn.fullpage.reBuild(); 

    var activeSec = $('.fp-section.active').index(); 

    $.fn.fullpage.destroy('all'); 

    $('.section').eq(activeSec).addClass('active'); 

    $('#section2').fadeIn('fast', function(){ 
     setTimeout(function(){ 
      fullPageInit(); 
      $.fn.fullpage.moveSectionDown(); 
     }, 0); 
    }); 

    }); 

}); 

Answer 1

おかげで、それは私が始める助けたものです。しかし、私は、作成されている新しいセクションでscrollOverflowを処理する方法を理解していないようです。

セクションを追加した直後にreBuild関数を使用します。

the docsに詳述されているように

$.fn.fullpage.reBuild(); 

：

Updates新しいウィンドウの大きさやその内容に合わせてDOM構造。サイトのDOM構造のAJAX呼び出しや外部の変更と組み合わせて使用​​するのに理想的です。特にscrollOverflowを使用する場合：true。

を更新しました

あなたはおそらく、フェードインが行われましたfullPageInitafterを使用する必要があります。

$('#section2').fadeIn("normal", function() { 
    fullPageInit(); 
    $.fn.fullpage.moveSectionDown(); 

});