Показать сообщение отдельно
  #1 (permalink)  
Старый 13.07.2015, 13:49
Новичок на форуме
Отправить личное сообщение для min89 Посмотреть профиль Найти все сообщения от min89
 
Регистрация: 13.07.2015
Сообщений: 4

Анимация чисел при скролле до элемента
Здравствуйте, есть скрипт

$(window).scroll(function () {
  var scrTop = $(window).scrollTop();
    if(scrTop>$('.statistik').offset().top - $(window).height()  ) {
        numAnimate();
    }
});
function numAnimate () {
$('.years').animate({ num: 14 - 1 }, {
    duration: 3000,
    step: function (num){
        this.innerHTML = (num + 1).toFixed(0)
    }
});
$('.m2').animate({ num: 102763 - 3 }, {
    duration: 3000,
    step: function (num){
        this.innerHTML = (num + 3).toFixed(0)
    }
});
$('.peoples').animate({ num: 837 - 3 }, {
    duration: 3000,
    step: function (num){
        this.innerHTML = (num + 3).toFixed(0)
    }
});
};


а html код

<div class="block">
<div class="numbers statistik">
<div class="col left">
<div class="num years">14</div>
<div class="name"></div>
</div>
<div class="col center">
<div class="num m2">102763</div>
<div class="name"></div>
</div>
<div class="col right">
<div class="num peoples">837</div>
<div class="name"></div>
</div>
</div>
</div>


Суть его в том, что при скролле до класса .statistik срабатывает анимация чисел в классах .years .m2 .peoples.

Только работает он не везде, что очень странно, разобраться сам не смог. Скрипт расположен на главной странице сайта, сам сайт работает на вордпресс. Так же на данной странице подключены - скрипт wow.js и animate.css. Проблема в том, что скрипт работает абсолютно везде. Начнем по порядку - в jsfiddle.net, на любой другой странице сайта, на любых страницах html сайтов, просто из index.html, набросанного в notepad++, в любом браузере и устройстве.

Но категорически не хочет работать на той странице, для которой ему уготовано место. Уже и отключал wow.js, animate.css, менял привязку к классам и сами классы, думая, что есть такие же в шапке\на первом-втором экране (что заставляло бы срабатывать скрипт раньше). Но нет, дело не в этом. Хедер и футер, а так же все что есть на этой странице, идентично на остальных, за исключением контента, состоящего из div.

Работает даже и анимация числа, но не событие scroll, которое запускает эту самую анимацию в нужном месте. Кто виноват и что делать - не знаю. Заранее Спасибо.
Ответить с цитированием