元素滾動到網頁上時執行計數器腳本

我完全不熟悉JavaScript。我試圖執行一個計數腳本，但我只希望它在您滾動到屏幕上的元素時啓動（以便您可以看到計數）。目前，我的代碼目前僅適用於網頁加載。有人能幫幫我嗎？謝謝。元素滾動到網頁上時執行計數器腳本

下面是HTML代碼元素：<span class="count">100</span>

這裏是當前工作的頁面加載腳本：

$('.count').each(function() { 
$(this).prop('Counter',0).animate({ 
    Counter: $(this).text() 
}, { 
    duration: 4000, 
    easing: 'swing', 
    step: function (now) { 
     $(this).text(Math.ceil(now)); 
    } 
});

}）;

來源

2017-05-16 opiumpot

你可以使用這樣的事情：

$element = $('.count'); 
$(window).scroll(function() { 
    var hT = $element.offset().top, 
     hH = $element.outerHeight(), 
     wH = $(window).height(), 
     wS = $(this).scrollTop(); 
    if (wS > (hT + hH - wH)) { 
     $element.each(function() { 
     $(this).prop('Counter',0).animate({ 
      Counter: $(this).text() 
      }, { 
       duration: 4000, 
       easing: 'swing', 
       step: function (now) { 
        $(this).text(Math.ceil(now)); 
       } 
      }); 
     }); 
    } 
});

它的作用是驗證當前滾動對抗元素在頁面偏移偏移。希望能幫助到你。

來源

2017-05-16 21:38:47 Joscplan

感謝您的回覆，雖然此代碼確實開始計數，當我滾動到它。它的表現也非常時髦，因爲它在計數，然後計數回到0，然後開始非常緩慢地重新計數。我正在尋找它只計算一次，並保持在那個數字，除非他們重新加載頁面。 – opiumpot

好吧，我剛剛找到了別人已經完成的解決方案。我確信有一個更簡單的腳本可能，但這個作品像一個魅力。我編輯SPAN元素像這樣： <span class="timer count-title count-number" data-to="100" data-speed="5000"></span>

我然後用於更新2月2日的JavaScript代碼發現@Bootstrap counter start on display。希望這有助於其他人尋找一個滾動到激活計數器。

來源

2017-05-17 16:43:50 opiumpot

元素滾動到網頁上時執行計數器腳本

回答

相關問題