Событие при скроле
Здравствуйте! Помогите, пожалуйста, чайнику.
Есть скрипт для прогресс бара: $(".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,
Сделать глобальный флаг, проверять в обработчике, если установлен - выход при первом обращении установить флаг. |
Вопрос решил, вот что получилось:
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"); } }); } } }); |
Как-то так
$(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, время: 06:32. |