Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.02.2017, 21:21
Интересующийся
Отправить личное сообщение для sim4ik-one Посмотреть профиль Найти все сообщения от sim4ik-one
 
Регистрация: 02.11.2015
Сообщений: 23

Событие при скроле
Здравствуйте! Помогите, пожалуйста, чайнику.
Есть скрипт для прогресс бара:
$(".dial").knob();
	$({animatedVal: 0}).animate({animatedVal: 100}, {
		duration: 2000,
		size: 230,
		easing: "swing",
		step: function() { 
			$(".dial").val(Math.ceil(this.animatedVal)).trigger("change"); 
}   
});

Сам прогресс бар находится в блоке с классом "about"
<section class="about" id="about">
</section>

Подскажите, как сделать так, что бы сам скрипт выполнялся только при прокрутке к блоку с классом "about"
Пытался сделать так:
$(function () {  
	$(window).scroll(function() {
		if ($(this).scrollTop()> 1550) {
	$(".dial").knob();
	$({animatedVal: 0}).animate({animatedVal: 100}, {
		duration: 2000,
		size: 230,
		easing: "swing",
		step: function() { 
			     $(".dial").val(Math.ceil(this.animatedVal)).trigger("change"); 
	}   
	});
        }
    });
});

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

Последний раз редактировалось sim4ik-one, 16.02.2017 в 21:30.
Ответить с цитированием
  #2 (permalink)  
Старый 17.02.2017, 10:13
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

sim4ik-one,
Сделать глобальный флаг,
проверять в обработчике, если установлен - выход
при первом обращении установить флаг.
Ответить с цитированием
  #3 (permalink)  
Старый 17.02.2017, 14:12
Интересующийся
Отправить личное сообщение для sim4ik-one Посмотреть профиль Найти все сообщения от sim4ik-one
 
Регистрация: 02.11.2015
Сообщений: 23

Вопрос решил, вот что получилось:
var scrolled = false;
$(window).scroll(function(){
    if (!scrolled) {
        var st = $(this).scrollTop();
        console.log(st);
        if(st >= 1550 && st<=1900){
            scrolled = true;
			$(".dial").knob();
			$({animatedVal: 0}).animate({animatedVal: 100}, {
				duration: 2000,
				size: 230,
				easing: "swing",
				step: function() { 
						 $(".dial").val(Math.ceil(this.animatedVal)).trigger("change"); 
			}   
			});
        }
    }
});

Последний раз редактировалось sim4ik-one, 17.02.2017 в 15:09.
Ответить с цитированием
  #4 (permalink)  
Старый 17.02.2017, 15:11
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Как-то так
$(function () { 
   var scrollFlag = false; 
   $(window).scroll(function() {
      if ($(this).scrollTop()> 1550) {
         if(!scrollFlag)  {
             scrollFlag = true;
             $(".dial").knob();
             $({animatedVal: 0}).animate({animatedVal: 100}, {
                  duration: 2000,
                  size: 230,
                  easing: "swing",
                  step: function() { 
                     $(".dial").val(Math.ceil(this.animatedVal)).trigger("change"); 
                  }   
             });
         }
      }
      else { scrollFlag = false; }
   });
});
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Событие при изменении размера окна в диапазоне (для адаптивной верстки) spo Общие вопросы Javascript 4 02.10.2014 15:51
переопределение переменных при событие onchange lw091190 Элементы интерфейса 0 29.06.2014 12:07
событие при редактирование данных в грид demi ExtJS 1 20.08.2013 11:37
Как правильно подавить событие при подключении своего обработчика? Маэстро Firefox/Mozilla 2 03.09.2011 11:46
Событие при вставке ссылки в input Flake Общие вопросы Javascript 1 21.08.2010 12:19