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

Thanks for commenting, that's what helped me get started. But I cant seem to figure out how to get the scrollOverflow working on the new section being created.

在添加部分后使用 reBuild 功能。

$.fn.fullpage.reBuild();

详见the docs：

Updates the DOM structure to fit the new window size or its contents. Ideal to use in combination with AJAX calls or external changes in the DOM structure of the site, specially when using scrollOverflow:true.

已更新

淡入发生后，您可能需要使用 fullPageInit。

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

});

fullpage.js - 在点击时的部分之间添加动态部分

fullpage.js - Add dynamic section in between sections on click

javascript

已更新