Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Событие при скроле (https://javascript.ru/forum/css-html/67425-sobytie-pri-skrole.html)

sim4ik-one 16.02.2017 21:21

Событие при скроле
 
Здравствуйте! Помогите, пожалуйста, чайнику.
Есть скрипт для прогресс бара:
$(".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 пикселей и скролится дальше, то на каждый пройденный пиксель ниже анимация срабатывает заново, а повторятся больше не должна

Dilettante_Pro 17.02.2017 10:13

sim4ik-one,
Сделать глобальный флаг,
проверять в обработчике, если установлен - выход
при первом обращении установить флаг.

sim4ik-one 17.02.2017 14:12

Вопрос решил, вот что получилось:
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"); 
			}   
			});
        }
    }
});

Dilettante_Pro 17.02.2017 15:11

Как-то так
$(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; }
   });
});


Часовой пояс GMT +3, время: 18:28.