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 함수를 사용하십시오.

the docs에 설명 된대로

$.fn.fullpage.reBuild(); 

:

업데이트 새 창의 크기 나 내용에 맞게 DOM 구조. 사이트의 DOM 구조에서 AJAX 호출 또는 외부 변경과 함께 사용하는 것이 이상적입니다. 특히을 사용하는 경우 이 특히 유용합니다.

당신은 아마 fadeIn이 걸린 fullPageInitafter이 발생 사용할 필요가

업데이트되었습니다.

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

});