Анимация при скролле

390

19 июня 2017, 22:40

Подскажите пожалуйста, где я ошибаюсь при решение следующей задачи. Собственно задача заключается в том, что проскролив определённое кол-во пикселей вниз, происходило плавное анимирование числа. Для этого я написал функцию, в которую передаются два параметра: селектор и количество пикселей которые нужно проскролить вниз, чтобы функция отработала. Проблема возникает тогда, когда мы доскролили до нужного блока, а потом опять начинаем скролить вверх

 function Counter(selector, height) { 
            if ( $(window).scrollTop() < height ) { 
                $(selector).each(function () { 
                    $(this).prop('Counter',0).animate({ 
                        Counter: $(this).text() 
                    }, { 
                        duration: 1000, 
                        easing: 'linear', 
                        step: function (now) { 
                            $(this).text(Math.ceil(now)); 
                        } 
                    }); 
                });       
            } 
        } 
$(window).on("scroll", function () { 
  Counter(".block-sale__number", "700"); 
  Counter(".buy-program-info__middle span", "1199"); 
});

.block-sale__number { 
  position: fixed; 
  top: 0; 
} 
.buy-program-info__middle { 
  position: fixed; 
  top: 15px; 
} 
p { 
  display: block; 
  overflow: hidden; 
  height:600px; 
  background: #FEE; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<div class="block-sale__number">1000</div> 
<div class="buy-program-info__middle"><span>10000</span></div> 
<p>1</p> 
<p>2</p> 
<p>3</p>

Answer 1

Исправляем условие, нам нужно начать анимацию после того, как доскроллили до нужной точки, т.е. всё-таки $(window).scrollTop() >= height
Есть проблема в том, что иницируется запуск новой анимации после того, как уже одна анимация стартовала. Блокируем повторные запуски анимации с помощью data-атрибута.

function Counter(selector, height) { 
  if ($(window).scrollTop() >= height) { 
    $(selector).each(function() { 
      var $t = $(this); 
      if (!$t.data('fired')) { 
        $t.data('fired', true); 
        $t.prop('Counter', 0).animate({ 
          Counter: $t.text() 
        }, { 
          duration: 1000, 
          easing: 'linear', 
          step: function(now) { 
            $t.text(Math.ceil(now)); 
          } 
        }); 
      } 
    }); 
  } 
} 
$(window).on("scroll", function() { 
  Counter(".block-sale__number", "700"); 
  Counter(".buy-program-info__middle span", "1199"); 
});

.block-sale__number { 
  position: fixed; 
  top: 0; 
} 
 
.buy-program-info__middle { 
  position: fixed; 
  top: 15px; 
} 
 
p { 
  display: block; 
  overflow: hidden; 
  height: 600px; 
  background: #FEE; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<div class="block-sale__number">1000</div> 
<div class="buy-program-info__middle"><span>10000</span></div> 
<p>1</p> 
<p>2</p> 
<p>3</p>