用户滚动到某个页面锚点后如何调用函数？

Question

我正在使用插件 fullpage.js，我想在页面的特定点调用一个函数——也就是说，在该函数为新元素设置动画之前不允许向下滚动，然后再次允许滚动一次那个动画就完成了。如果是第一部分，我该如何使用“onload”？我不知道如何构建它。

这是插件的创建者在 github 上告诉我的：“您可以在要粘贴的部分的 onLoad 回调中使用 setAllowScrolling(false)，然后加载您的内容或动画，然后使用 setAllowScrolling(true)再次。”下面是我的问题，我在 Github 上请求编码帮助，我现在意识到这不是合适的地方......

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

他说的话在逻辑上对我来说非常有道理，但我不知道从哪里开始，而且时间紧迫，所以任何关于如何构建它的帮助对我来说都意味着世界。

我想在用户进入第二部分之前为“uk-flag”元素设置动画：

<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 获取完整示例。

编辑（2014-11-16）：

使用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 以了解它的实际效果。