Страницы

Поиск по вопросам

вторник, 4 июня 2019 г.

Вызов счётчика jquery.countTo.js при попадание в область видимости экрана?

Добрый день. Есть 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; .... }
необходима, что-бы при дальнейшей прокрутке страницы счётчик не вызывался снова.

Комментариев нет:

Отправить комментарий