Задать вопрос
@pwnography

Как заставить скрипт срабатывать, когда до него доскроллишь?

Здравствуйте, на страницу в самом конце подключен скрипт kottenator.github.io/jquery-circle-progress.
Мне нужно, чтобы он срабатывал только тогда, когда до него прокрутишь страницу, а не как сейчас при ее загрузке.
Как такое реализовать? C JS совсем не дружу(
  • Вопрос задан
  • 1883 просмотра
Подписаться 8 Оценить Комментировать
Решение пользователя BohdanK К ответам на вопрос (4)
BohdanK
@BohdanK
var circle_viewed = false;  // Вспомогательная переменная
    var circle_scroll = $('.circle');     // Класс самой диаграммы
    var offset = circle_scroll.offset(); // Расстояние в пикселях до самой диаграммы от верха страницы 

$(window).scroll(function(){
        if ((($(document).scrollTop()) > ((parseFloat(offset.top)) - parseFloat($(window).height()))) && (!(circle_viewed ))) { //если страница прокручена то проверяем докрутили ли мы до самой диаграммы
            $('.circle-1').circleProgress({  // Если докрутили, инициализируем 
                size: 160,
                startAngle: -1.55,
                value: 0.9,
                fill:{ color: "#30bae7"}
            }).on('circle-animation-progress', function(event, progress) {  // Рисуем проценты во время анимации
                $(this).find('strong').html(parseInt(90 * progress) + '<i>%</i>');
            });

            circle_viewed = true;
});


// эта конструкция ((parseFloat(offset.top)) - parseFloat($(window).height())) делает следующее, когда вы долистываете до нужно диаграммы, то отсчет пикселей начинается с верхней части экрана пользователя, соответственно мы отнимаем высоту экрана и получается что когда долистываем до диаграммы снизу экрана, то она будет стартовать.

circle_viewed - это если мы один раз просмотрели диаграмму, то второй раз когда мы к ней долистаем, её анимировать не надо.
jQuery, разумеется, должен быть подключен.
Ответ написан
Комментировать