一旦用戶滾動到某個頁面定位點，我該如何調用一個函數？

Question

我正在使用插件fullpage.js，我想在頁面中的特定點調用一個函數 - 即不允許向下滾動，直到該函數動畫了一個新元素，然後再次允許滾動一次動畫完成。如果是第一部分，我該如何使用「onload」？我不知道如何構建這個。

這就是插件的創建者在github上告訴我的：「您可以在要粘貼的部分的onLoad回調上使用setAllowScrolling（false），然後加載您的內容或動畫，然後使用setAllowScrolling（true ）「。這裏是我下面的問題，我要求在Github上編碼的幫助，我現在知道的是不是該在正確的地方...

https://github.com/alvarotrigo/fullPage.js/issues/801

他說什麼讓我感覺良好邏輯，但我不知道從哪裏開始，時間緊迫，所以如何構建它的任何幫助將意味着我的世界。

我想在之前的用戶可以到第二節動畫的「英國國旗」元素：

<div class="section" id="section-one"> 
    <div class="uk-flag"></div> 
</div> 
<div class="section" id="section-two"> 
    <h1>Heading</h1> 
    <p>Hi</p> 
</div> 

編輯：這裏有一個稍微不正常jsfiddle我剛剛颳起了......

Answer 1

要達到您的期望，您應該使用setTimeout() javascript函數。
使用setTimeout()回調，您可以執行任何你想要的延遲後。
例如，您可以使用setAllowScrolling(false)禁用鼠標滾動，並在動畫完成後使用moveSectionDown()移至下一部分。

例如：

$(document).ready(function() { 
    // on page load 
    $('#uk-flag').animate({'opacity':'1'}, 5000); 

    $('#fullpage').fullpage({ 

     // options 
     verticalCentered: false, 
     scrollingSpeed: 850, 
     onLeave: function(index, nextIndex, direction) { 

      // after leaving Introduction 
      if(index == 1 && direction == 'down') { 

       // disable mouse scroll 
       $.fn.fullpage.setAllowScrolling(false); 
       // animation section2 
       $('#fr-flag').animate({'opacity':'1'}, 5000); 
       // reset section1 flag 
       $('#uk-flag').animate({'opacity':'0'}, 0); 

       // wait 5sec and go section3 
       setTimeout(function() { 
        // move section down 
        $.fn.fullpage.moveSectionDown(); 
        // enable mouse scroll 
        $.fn.fullpage.setAllowScrolling(true); 
        // animation section3 
        $('#de-flag').animate({'opacity':'1'}, 5000); 
        // reset section2 flag 
        $('#fr-flag').animate({'opacity':'0'}, 0); 
       }, 5000); 
      } 
     } 
    }); 
}); 

檢查這個JSBin一個完整的例子。

EDIT（情節中字）：

使用afterRender事件，你可以做你的頁面加載後馬上想要什麼。

$(document).ready(function() { 
    $('#fullpage').fullpage({ 

     // options 
     verticalCentered: false, 
     scrollingSpeed: 850, 
     afterRender: function(anchorLink, index) { 
      // disable mouse scroll 
      $.fn.fullpage.setAllowScrolling(false); 
      // animation section1 
      $('#uk-flag').animate({'opacity':'1'}, 5000); 

      // wait 5sec and go section2 
      setTimeout(function() { 
      // move section down 
      $.fn.fullpage.moveSectionDown(); 
      // enable mouse scroll 
      $.fn.fullpage.setAllowScrolling(true); 
      // animation section2 
      $('#fr-flag').animate({'opacity':'1'}, 5000); 
      // reset section1 flag 
      $('#uk-flag').animate({'opacity':'0'}, 0); 
      }, 5000); 
     }, 
     onLeave: function(index, nextIndex, direction) { 

      // after leaving Introduction 
      if(index == 1 && direction == 'down') { 

       // disable mouse scroll 
       $.fn.fullpage.setAllowScrolling(false); 
       // animation section2 
       $('#fr-flag').animate({'opacity':'1'}, 5000); 
       // reset section1 flag 
       $('#uk-flag').animate({'opacity':'0'}, 0); 

       // wait 5sec and go section3 
       setTimeout(function() { 
        // move section down 
        $.fn.fullpage.moveSectionDown(); 
        // enable mouse scroll 
        $.fn.fullpage.setAllowScrolling(true); 
        // animation section3 
        $('#de-flag').animate({'opacity':'1'}, 5000); 
        // reset section2 flag 
        $('#fr-flag').animate({'opacity':'0'}, 0); 
       }, 5000); 
      } 
     } 
    }); 
}); 

檢查此其他JSBin看到它在行動。