Выполнение скрипта по прокрутке до блока с id?

Question

[Spout07]

Есть скрипт, который крутит числа:

<script>
$(function () {
		$({numberValue: 0}).animate({numberValue: 287}, {
			duration: 24000, // Скорость анимации, где 500 = 0,5 одной секунды, то есть 500 миллисекунд
			easing: "linear",
			step: function(val) {
				$(".pricez").html(Math.ceil(val)); // Блок, где необходимо сделать анимацию
			}
		});
	});

	
</script>

И есть его вывод в блоке:

<div id="servers"><h1 style="padding-top:105px; text-align:center;">
		Online: <b class="pricez">0</b> servers
			</h1></div>

Как сделать так, чтобы скрипт стартовал лишь тогда, когда долистываешь до блока с id servers?

viewPort пробовал, не работает. Много чего пробовал, проблема заключается в том, как обернуть данный скрипт в функцию.... Заранее спасибо за помощь.

Answer 1

[Павел Антонов]

В вашем случае это будет примерно так, оборачиваете код вызова анимации в функцию, я назвал ее animatePrice

Далее по скроллу мы должны вызвать функцию. Но чтобы функция не вызывалась постоянно каждый раз когда мы скроллим мы пишем условие отработать только когда мы достигнем позиции блока #servers.

isAnimatePriceInitialized это маркер который поможет нам запустить функцию 1 раз по скроллу и больше не вызывать ее. Т.е по умолчанию стоит false, доскроллили до #servers функция animatePrice выполнилась, isAnimatePriceInitialized стало true и больше функция animatePrice вызыватсья не будет т.к условие стоит
if (!isAnimatePriceInitialized) {}

var isAnimatePriceInitialized = false;
var serversTop = $("#servers").offset().top;

function animatePrice(){
    $({numberValue: 0}).animate({numberValue: 287}, {
        duration: 24000, // Скорость анимации, где 500 = 0,5 одной секунды, то есть 500 миллисекунд
        easing: "linear",
        step: function(val) {
            $(".pricez").html(Math.ceil(val)); // Блок, где необходимо сделать анимацию
        }
    });
    isAnimatePriceInitialized = true;
}

$(window).scroll(function() {
    if ( ($(this).scrollTop() > serversTop){
        if (!isAnimatePriceInitialized) {
            animatePrice();
        }
    }
});

Comments

[Spout07]

[Павел Антонов]

ну написано же в чем ошибка) скубку лишнюю убрать

$(window).scroll(function() {
    if ($(this).scrollTop() > serversTop){
        if (!isAnimatePriceInitialized) {
            animatePrice();
        }
    }
});

[Spout07]

Павел Антонов, cпасибо огромное