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

Question

[K G]

Здравствуйте, на страницу в самом конце подключен скрипт kottenator.github.io/jquery-circle-progress.
Мне нужно, чтобы он срабатывал только тогда, когда до него прокрутишь страницу, а не как сейчас при ее загрузке.
Как такое реализовать? C JS совсем не дружу(

Answer 1

[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, разумеется, должен быть подключен.

Answer 2

[Евгений]

Если использовать jQuery, то как-то так:

$(function () {
    $(window).on('scroll.progress', function () {
        var scrollTop = $(this).scrollTop();

        if (scrollTop > 1500 /* Нужное значение на странице */ ) {
            /* Запускаем скрипт */
            /* Отписываемся от события если больше не нужно запускать скрипт */
            $(window).off('scroll.progress');
        }
    });
});

Comments

[K G]

считается от начала страницы или от верха окна браузера?

[Евгений]

От начала страницы

Answer 3

[K G]

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;
});

Comments

[BohdanK]

Смотря как у вас эти диаграммы расположены, если они все рядом и на одном уровне, то можете взять просто одну первую диаграмму для вычисления смещения, либо использовать вместо id класс. А если условие принято, то инициализировать в условии не одну, а все диаграммы.

[K G]

BohdanK: Отредактировал ответ, вот так правильно? Не работает ничего, в том числе сам скрипт(

[xfg]

pwnography: В данный момент ваш код дурно пахнет.

[K G]

xfg: это отредактированный код с учетом ответа BohdanK. Скажи что не так?

[xfg]

pwnography: Дублирование кода. Обратите внимание, что описание всех ваших диаграмм отличаются только значениями некоторых свойств. Вас это не смущает?

[K G]

xfg: В данном случае, я просто хочу, чтобы это работало. Поможете именно с этим разобраться?

Answer 4

[Stalker_RED]

Если неохота самому писать проверку на десяток строчек, есть готовые плагины для jQuery: apperr, inview, waypoint и т.п.
stackoverflow.com/questions/487073/check-if-elemen...

Comments

[K G]

я попробовал каждую из них, консоль пишет Uncaught TypeError: $(...).circleProgress is not a function.
свой, рабочий до всех этих скриптов, код, начиная с $('#perc1').circleProgress({ вставляю между {} например в waypoint var waypoint = new Waypoint({
element: document.getElementById('projects'),
handler: function() {}
});
И консоль выдает ошибку( абсолютно на всех плагинах, что делать? Где я делаю криво?