Является ли это правильным способом повторного использования функции JS?

Question

У меня есть две написанные функции, которые отлично работают. Одна функция добавит атрибут видео HTML autoplay в элемент видео DOM, если пользователь находится в определенном разделе на странице. Другая функция будет скользить в некоторых элементах с хорошим переходом.

Но недостатком является то, что он будет работать для одного элемента внутри страницы, но я хотел бы, чтобы он работал и с другими элементами.

Вот одна функция, то один, что воспроизведение видео на свитке:

playOnScroll: function() { 

    var player = $('.browser video'); 
    var hasReached = false; 

    function isInView(elem){ 
     return $(elem).offset().top - $(window).scrollTop() < $(elem).height(); 
    } 

    $(window).scroll(function() { 

     var section = $('#user-experience'); 

     // If section exists 
     if (section.length) { 

      if (isInView(section) && !hasReached) { 
       // console.log('play video'); 
       hasReached = true; 
       player.get(0).play(); 
      } 

     } 

    }); 

} 

На данный момент функция делает только работу, если раздел с идентификатором #user-experience в поле зрения, но было бы здорово, если бы Я могу использовать эту функцию для большего количества разделов.

На момент написания статьи я собираюсь изменить целевой раздел на имя класса, и если раздел имеет этот класс, он выполнит свою работу. Или есть лучший способ сделать это?

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

moduleShift: function() { 

    var root = this; 
    var el = $('.entry figure'); 
    var offset = 0.8; 

    root.isVisible(el, offset); 

    $(window).scroll(function() { 

     // Get the offset of the window from the top of page 
     var windowPos = $(this).scrollTop(); 

     setTimeout(function(){ 
      root.isVisible(el, offset); 
     }, 1000); 

    }); 

}, 

isVisible: function(el, offset) { 

    el.each(function() { 
     var elHeight = $(this).outerHeight(); 
     var offsetTop = $(this).offset().top; 
     var offsetBottom = offsetTop + elHeight; 

     if (offsetTop <= $(window).scrollTop() + $(window).height()*offset) { 
      $(this).addClass('moduleShift'); 
     }; 

    }); 

} 

То же самое решение выше должно быть применимо и к этой функции, но, возможно, такой же вопрос, как и для первой функции, есть ли лучший способ сделать это?

Буду признателен за советы. Заранее спасибо. Если у вас остались вопросы, сообщите мне.

Answer 1

Вы можете использовать jQuery Waypoints. Это самый простой способ сделать это. Ваши функции isVisible и moduleShift должны быть обработчиками событий, инициируемых при прокрутке пользователя до определенной точки. Например:

var waypoint = new Waypoint({ 
    element: document.getElementById('placeOfYourVideoPlayer'), 
    handler: moduleShift; 
})