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

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

Здравствуйте, на страницу в самом конце подключен скрипт kottenator.github.io/jquery-circle-progress.
Мне нужно, чтобы он срабатывал только тогда, когда до него прокрутишь страницу, а не как сейчас при ее загрузке.
Как такое реализовать? C JS совсем не дружу(
  • Вопрос задан
  • 1862 просмотра
Комментировать
Подписаться 8 Оценить Комментировать
Решения вопроса 1
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, разумеется, должен быть подключен.
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 3
AppFA
@AppFA
Frontend developer at Yandex
Если использовать jQuery, то как-то так:
$(function () {
    $(window).on('scroll.progress', function () {
        var scrollTop = $(this).scrollTop();

        if (scrollTop > 1500 /* Нужное значение на странице */ ) {
            /* Запускаем скрипт */
            /* Отписываемся от события если больше не нужно запускать скрипт */
            $(window).off('scroll.progress');
        }
    });
});
Ответ написан
2 комментария
2 комментария
@pwnography Автор вопроса
BohdanK Спасибо за помощь, но у меня 5 разных диаграмм с разными ID, как в таком случае сделать? в условие вместо одной запихнуть 5? Так вроде не работает, да и переменная у нас вверху только одна объявлена

В данный момент код такой
var circle_viewed = false;  // Вспомогательная переменная
    var circle_scroll = $('#perc1');     // Класс самой диаграммы
    var offset = circle_scroll.offset(); // Расстояние в пикселях до самой диаграммы от верха страницы 

$(window).scroll(function(){
        if ((($(document).scrollTop()) > ((parseFloat(offset.top)) - parseFloat($(window).height()))) && (!(circle_viewed ))) { //если страница прокручена то проверяем докрутили ли мы до самой диаграммы
            $('#perc1').circleProgress({
				value: 0.10,
				size: 105,
				fill: {
					color: "#ed9c10"
				},
				emptyFill: "rgba(215, 217, 216, .4)"
			}).on('circle-animation-progress', function (event, progress) {
				$(this).find('strong').html(parseInt(10 * progress));
			});
			$('#perc2').circleProgress({
				value: 0.15,
				size: 105,
				fill: {
					color: "#ed9c10"
				},
				emptyFill: "rgba(215, 217, 216, .4)"
			}).on('circle-animation-progress', function (event, progress) {
				$(this).find('strong').html(parseInt(15 * progress));
			});
			$('#perc3').circleProgress({
				value: 0.25,
				size: 105,
				fill: {
					color: "#ed9c10"
				},
				emptyFill: "rgba(215, 217, 216, .4)"
			}).on('circle-animation-progress', function (event, progress) {
				$(this).find('strong').html(parseInt(25 * progress));
			});
			$('#perc4').circleProgress({
				value: 0.25,
				size: 105,
				fill: {
					color: "#ed9c10"
				},
				emptyFill: "rgba(215, 217, 216, .4)"
			}).on('circle-animation-progress', function (event, progress) {
				$(this).find('strong').html(parseInt(25 * progress));
			});
			$('#perc5').circleProgress({
				value: 0.55,
				size: 105,
				fill: {
					color: "#ed9c10"
				},
				emptyFill: "rgba(215, 217, 216, .4)"
			}).on('circle-animation-progress', function (event, progress) {
				$(this).find('strong').html(parseInt(50 * progress));
			});

            circle_viewed = true;
});
Ответ написан
6 комментариев
6 комментариев
Stalker_RED
@Stalker_RED
Если неохота самому писать проверку на десяток строчек, есть готовые плагины для jQuery: apperr, inview, waypoint и т.п.
stackoverflow.com/questions/487073/check-if-elemen...
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Доработать сайт на CS-Cart (статусы товаров и цены)
25 апр. 2024, в 16:56
5000 руб./за проект
Внесение правок в мобильное приложение (Android)
25 апр. 2024, в 16:54
3000 руб./за проект
Motion дизайн для гиф
25 апр. 2024, в 16:38
12000 руб./за проект
Ещё заказы