ビューポートから外れたときにスライダがスクロールしないようにしますか？

Question

サンプルページ：http://550.9f2.myftpupload.com/speaking-engagements/

Wordpress（ビジュアルコンポーザー）で構築。

ページの中央付近に、各スライド間を自動的にスクロールする、引用符付きの黄色のスライダが表示されます。各スライドのサイズはテキストの量に応じて変化するため、ユーザーが一度スクロールすると自動スライドが停止する必要があります。それ以外の場合は、スライダーが異なるスライドを通過すると、下のコンテンツが上下にジャンプします。

オンラインで私の研究は、これがJavascript/jQueryで行われるべきだと教えてくれますか？誰にも分かりませんが、初心者がこれをどのように実装できるかについてのヒントはありますか？

Answer 1

あなたが世話をする必要があります二つのことがあります。天気をスライダーを検出

1）は、ユーザのために表示されています。たとえば、thisまたはthis

2）スライダーの視認性に応じてスライダーを停止/開始するなど、いくつかの解決策があります。 すべてを組み合わせると、コードは次のようになります。それは概念的であり、テストされていませんが、そのアイデアは明らかです。

jQuery(window).scroll(function($) { 

    function isScrolledIntoView(elem) 
    { 
     var docViewTop = $(window).scrollTop(); 
     var docViewBottom = docViewTop + $(window).height(); 

     var elemTop = $(elem).offset().top; 
     var elemBottom = elemTop + $(elem).height(); 

     return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
    } 


    if (isScrolledIntoView($('.rd_testimonials'))){ 
     $('.rd_testimonials').carouFredSel({auto: false}); 
    } else { 
     $('.rd_testimonials').carouFredSel({auto: true}); 
    } 

});