Запустить код в определенном разделе 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();
},

Похоже, что мои предыдущие функции переопределяют, возможно, потому что я не индексирую разделы должным образом. Любая помощь будет принята с благодарностью.

Спасибо,

Answer 1

Вы можете попросить прокрутить, какой раздел является текущим и воспроизвести / приостановить из этого -

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...
         }
       }
   });