Как активировать скрипт на нужной секции?

Question

[1canada]

Есть JSскрипт, он должен активироваться только тогда, когда будет на секции #stats, то есть пользователь доскроллит до него. Как это сделать?

$('.stats__digits').each(function (){
        $(this).prop('Counter',0).animate({
          Counter: $(this).text()
        }, {
          duration:4000,
          easing: "swing",
          step:function(now){
            $(this).text(Math.ceil(now));
          }
        });
      });

Comments

[Spartak (Web-StyleStudio)]

А где здесь jQeury?

[1canada]

Spartak (Web-StyleStudio), изменил

Answer 1

[Spartak (Web-StyleStudio)]

Такой информации много, стоит только загуглить
https://snipp.ru/jquery/show-on-scroll - выбирайте подходящий вариант (скорее всего 1 вариант), и применяйте для своих целей.

var block_show = false;
 
function scrollTracking() {
	if (block_show) {
		return false;
	}

	var wt = $(window).scrollTop();
	var wh = $(window).height();
	var et = $('#stats').offset().top;
	var eh = $('#stats').outerHeight();
	var dh = $(document).height();   

	if (wt + wh >= et || wh + wt == dh || eh + et < wh) {
		block_show = true;

		$('.stats__digits').each(function (){
			$(this).prop('Counter',0).animate({
				Counter: $(this).text()
			}, {
				duration:4000,
				easing: "swing",
				step:function(now){
					$(this).text(Math.ceil(now));
				}
			});
		});
	}
}

$(window).scroll(function(){
	scrollTracking();
});
	
$(document).ready(function(){
	scrollTracking();
});