Добрый день. Есть js счётчик чисел jquery.countTo.js. При загрузки страницы он вызывается и сразу запускается, но счётчик находится в средине страницы и при скролле вниз страницы уже не видно того анимационного эффекта. Как сделать чтобы счётчик сработал только когда он попадёт в область видимости экрана?
Вызов счётчика сейчас:
(function ($) {
var o = $('.count');
if (o.length > 0) {
include('js/jquery.countTo.js');
$(document).ready(function () {
$(o).countTo();
});
}
})(jQuery);
Ответ
Всем спасибо за ответы. Немного покумекав и поэкспериментировав, рабочий вариант получился такой:
(function ($) {
var o = $('.count');
var cc = 1;
if (o.length > 0) {
include('js/jquery.countTo.js');
$(window).scroll(function(){
var targetPos = o.offset().top;
var winHeight = $(window).height();
var scrollToElem = targetPos - winHeight;
var winScrollTop = $(this).scrollTop();
if (winScrollTop > scrollToElem) {
if (cc < 2){
cc = cc + 2;
$(document).ready(function () {
$(o).countTo();
});
}
}
});
}
})(jQuery);
Проверка
if (cc < 2){
cc = cc + 2;
....
}
необходима, что-бы при дальнейшей прокрутке страницы счётчик не вызывался снова.
Комментариев нет:
Отправить комментарий