從視口中移出時滾動停止滑塊嗎？

Question

示例頁面：http://550.9f2.myftpupload.com/speaking-engagements/

使用Wordpress（Visual Composer）構建。

近，你會看到一個黃色的滑蓋報價，其中每張幻燈片之間自動滾動頁面的中間。由於每張幻燈片的大小都根據文本的大小而變化，所以我需要在用戶滾動過去時自動滑動停止。否則，當滑塊滑過不同的幻燈片時，下面的內容會上下跳動。

我的研究在網上告訴我，這應該使用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}); 
    } 

});