JavaScript срабатывающий в видимой части браузера

Привет всем! Нестандартный вопрос сегодня, но вдруг кому пригодится: как сделать JavaScript срабатывающий в видимой части браузера? Т.е. пока мы не доскролим до слоя, в котором висит этот код — он не запустится. Решение подсказал мой старинный друг, гуру JavaScript — за что ему спасибо 🙂 Сам же я этот самый JavaScript только решаюсь посмотреть подробнее 🙂

Итак — вот код страницы, на которой расположен наш скрипт:

17337935985fc730e5b9928_000000

красным слой сделан специально — для демонстрации 🙂

А вот — сам код скрипта, который должен стартовать как только окажется в видимой части браузера:

var options = {
    root: null,
    rootMargin: '0px',
    threshold: 1.0
}
var callback = function(entries, observer) { 
  entries.map(item => {
     if(item.isIntersecting) {
        $('.count').each(function () {
            $(this).prop('Counter',0).animate({
                Counter: $(this).text()
            }, {
                duration: 4000,
                easing: 'swing',
                step: function (now) {
                    $(this).text(Math.ceil(now));
                }
            });
        });
     }
 
  })
};
var observer = new IntersectionObserver(callback, options);
observer.observe(document.querySelector('.count'));

Более полно это выглядит так:

Спасибо за внимание 🙂