运行 特定 Scrollify 部分的代码

Question

我有 3 个 Scrollify 部分。我正在尝试在您滚动到第 2 部分时播放视频，并在您滚动到第 1 或 3 部分时暂停它。

Codepen Demo

html

data-div-name="first"

data-div-name="second"

data-div-name="third"

JS

before: function(first) {
    $("#video").get(0).pause();
},

before: function(second) {
    $("#video").get(0).play();
},

before: function(third) {
    $("#video").get(0).pause();
},

看起来我的 before functions 被覆盖可能是因为我没有正确地 索引 这些部分。任何帮助将不胜感激。

谢谢，

Answer 1

您可以询问 scrollify 哪个部分是当前部分，play/pause 来自那个部分 -

before: function() {
    if($.scrollify.current().hasClass('second')){
        $("#video").get(0).play();
    } else {
        $("#video").get(0).pause();
    }
},

演示 - http://codepen.io/dmoojunk/pen/KWNZXG

我认为 scrollify 的工作方式与您对部分名称的看法不同，但如果您想使用这些数据属性，您可以执行类似 -

if($.scrollify.current().attr('data-div-name') === 'second'){

Answer 2

$(function() {

  $.scrollify({
     section:".spot",
     scrollSpeed:800,
     before: function() {

         if ($.scrollify.currentIndex() == 2){

           console.log('start');
           // Your actions...

         } else {

           console.log('end');
           // Your actions...
         }
       }
   });