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