fullpage.js - 点击

Question

我创建了一个on click函数来创建一个新的部分并将其放在上一部分之下，然后调用另一个文件中的内容并滚动到它。我可以让它工作，但问题在于当我引入内容时，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功能。

$.fn.fullpage.reBuild();

详见the docs：

  

更新DOM结构以适应新窗口大小或其内容。非常适合与AJAX调用或站点DOM结构的外部更改结合使用，特别是在使用scrollOverflow时：true 。

更新

你可能需要在fadeIn发生后使用fullPageInita。

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

});