我創建了一個點擊功能來創建一個新的部分，並將其放在前一部分下，然後調用另一個文件的內容並滾動到它。我可以讓它工作，但問題在於，當我帶入內容時，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 - 點擊部分之間添加動態部分

回答

更新

相關問題