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使用reBuild函数。

$.fn.fullpage.reBuild();

如文档中所述 ：

更新DOM结构以适合新窗口大小或其内容。 理想与AJAX调用或站点的DOM结构中的外部更改结合使用， 尤其是在使用scrollOverflow：true时 。

更新

在发生fadeIn之后，您可能需要使用fullPageInit。

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

});