Счётчик начинал отсчёт только когда он попадёт в видимую область

256
29 июля 2017, 07:26

Есть js счётчик чисел jquery.countTo.js. При загрузки страницы он вызывается и сразу запускается, но счётчик находится в средине страницы и при скролле вниз страницы уже не видно того анимационного эффекта. Поэтому использую плагин WayPoints для того чтобы скрипт выполнялся только при достижении определенного блока. Но после того, как я подключил WayPoints, счетчик перестал совсем вызываться. В чем проблема может быть?

<section id="testing"> 
            <span class="timer" data-from="25" data-speed="100" data-to="999"></span> 
</section>

var start = new Waypoint({ 
            element: document.getElementById('testing'), 
            handler: function () { 
                $('.timer').countTo(); 
            } 
        });

В консоле ошибок нет

Answer 1

Попробуйте так У меня в полном окне страницы работает

var count = 0; 
$(window).on('scroll', function(){ 
    scrollTop = $(window).scrollTop(); 
}); 
var scrollTop = $(window).scrollTop();; 
var windowHeight = document.body.clientHeight; 
setInterval(function(){ 
    if(scrollTop <= $('#counter').offset().top && (scrollTop + windowHeight) >= $('#counter').offset().top){ 
        console.log(count); 
        $('#counter').text(++count); 
    } 
}, 1000)
body{ 
  height:5000px; 
} 
#counter{ 
  width: 20px; 
  margin: 0 auto; 
  margin-top: 1000px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="counter">0</div>

READ ALSO
Помогите достать элемент (javascript)
javascript

Помогите достать элемент (javascript)

Помогите, пожалуйста, никак не могу достать элементДля выделения одной кнопки другим цветом, крашу все в старый синий, а выбранную в тёмный

 270
each затирает переменную, выводит только последнее значение
javascript

each затирает переменную, выводит только последнее значение

Выводит только последнее значение, хотя их намного большеВнутри конструкции поочередно данные выводит

 260
Как узнать css свойства по значению
javascript

Как узнать css свойства по значению

У меня есть значение css, мне с помощью javascript нужно узнать какие свойства использует используют это значениеНапример 100px

 280
Выполнение div с использованием задержки
javascript

Выполнение div с использованием задержки

Добрый День! Как можно задать задержку для элемента div? В моем случае это 3 элемента, и суть проблемы заключается в том, что нужно срабатывание...

 300