我创建了一个点击功能来创建一个新的部分，并将其放在前一部分下，然后调用另一个文件的内容并滚动到它。我可以让它工作，但问题在于，当我带入内容时，JS无法识别新的部分，并且不会用scrolloverFlow进行调整。以下是我用来实现此目的的代码。我知道我应该摧毁并重建它，但我无法重建它来调整新创建的部分中的新高度。任何帮助都会很棒。fullpage.js - 点击部分之间添加动态部分

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); 
    }); 

    }); 

});

来源

2017-01-31 lbwebk

Does http://stackoverflow.com/questions/36626527/adding-or-removing-sections-slides-to-fullpage-js-after-initialization help？ – Booboobeaker

感谢您的评论，这就是帮助我开始。但我似乎无法弄清楚如何让scrollOverflow工作在正在创建的新部分上。 – lbwebk

感谢评论，这就是帮助我上手。但我似乎无法弄清楚如何让scrollOverflow工作在正在创建的新部分上。

在添加该部分之后使用reBuild函数。

$.fn.fullpage.reBuild();

如the docs详述：

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

更新

您可能需要使用fullPageInitafter的淡入了发生。

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

});

来源

2017-01-31 16:52:56 Alvaro

感谢您回复阿尔瓦罗（你的插件很棒）。是的，这是我认为我必须做的事，但我仍然没有重建它。当我检查代码时，JS没有包装被拖入创建部分的内容。我试图找出哪个问题。 – lbwebk

您可能需要在淡入淡出之后使用'fullPageInit'。在回调中添加它。关于[jquery文档]的fadeIn回调的更多信息（http://api.jquery.com/fadein/） – Alvaro

我更新了我的答案。 – Alvaro

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

回答

更新

相关问题