これはJS関数を再利用する正しい方法ですか？

Question

私は素晴らしい2つの関数が書かれています。 1つの関数は、ユーザーがページの特定のセクションにある場合、ビデオDOM要素にHTMLビデオ属性autoplayを追加します。他の関数は素敵なトランジションでいくつかの要素をスライドさせます。

しかし、欠点はページ内の1つの要素で機能することですが、他の要素でも同様に機能させたいと考えています。今ID #user-experienceのセクションが表示されているが、それは場合は素晴らしいことだ場合は機能のみ作業を行うために

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

     } 

    }); 

} 

：ここ

は一つの機能、スクロールでビデオを再生するものです私はより多くのセクションでこの関数を使うことができます。

私は書いている時点で、ターゲットセクションをクラス名に変更しようと考えています。セクションにこのクラスがあれば、その作業を行います。または、これを行うためのよりよい方法がありますか？

私はスクロールにいくつかの素晴らしい入ってくるアニメーションを処理する私は前に述べた私の第二の機能、見てみるならば、私は複数の要素セレクタのために、この機能を再利用する方法を知りません。

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