Есть функция, нужно чтобы она срабатывала когда скролл доходит до нее

Question

Вот функция:

document.addEventListener('load', count())


function count() {
    document.querySelectorAll('.data-number').forEach((e) => {
        let currentNumber = 0
        let finalNumber = e.getAttribute('data-number')
        finalNumber = parseInt(finalNumber)
        let delay

        switch (true) {
            case (finalNumber < 30):
                delay = 100
                break
            case (finalNumber < 100):
                delay = 40
                break
            case (finalNumber < 300):
                delay = 10
                break
            default:
                delay = 50
                break
        }

        let increment = setInterval(() => {
            e.innerHTML = currentNumber
            if (currentNumber < finalNumber) {
                if (finalNumber > 1000) {
                    currentNumber += 100
                } else {
                    currentNumber++
                }
            } else {
                clearInterval(increment)
            }
        }, delay)
        increment
    })
}

Так же блок, в котором срабатывает скрипт, если нужно:

<div class="statistics" id="statistics">
        <div class="container">
            <div class="stat">
                <div class="stat__item">
                    <div class="data-number" data-number="84">84</div>
                    <div class="stat__text">Дизайнерских проекта</div>
                </div>
                <div class="stat__item">
                    <div class="data-number" data-number="246">246</div>
                    <div class="stat__text">Довольных клиентов</div>
                </div>
                <div class="stat__item">
                    <div class="data-number" data-number="15">15</div>
                    <div class="stat__text">Побед в номинаций</div>
                </div>
                <div class="stat__item">
                    <div class="data-number" data-number="99">99</div>
                    <div class="stat__text">Чашек коффе</div>
                </div>
                <div class="stat__item">
                    <div class="data-number" data-number="24">24</div>
                    <div class="stat__text">Сотрудника</div>
                </div>
            </div>
        </div>
    </div>

Answer 1

Посмотреть результат
Если вы используете ванильный js:

let target = document.querySelector('#statistics');
// top offset to element
let targetPos = target.getBoundingClientRect().top;
// window height
let winHeight = window.innerHeight;
// Really top offset to element
let scrollToElem = targetPos - winHeight;
// flag to check re-scroll
let flag = true;

document.addEventListener('scroll', () => {
    // if we scroll to element
    if (window.scrollY > scrollToElem && flag) {
        count(); flag = false;
    }
    // if we scroll to the element again, then everything will work again
    else if(window.scrollY < scrollToElem && !flag) { flag = true; }
});

Если вы используете jquery:

let target = $('#statistics');
let targetPos = target.offset().top;
let winHeight = $(window).height();
let scrollToElem = targetPos - winHeight;
let flag = true;

$(window).scroll(() => {
    if( $(this).scrollTop() > scrollToElem && flag ) {
        count(); flag = false;
    }
    else if( $(this).scrollTop() < scrollToElem && !flag) { flag = true; }
});

БЛОГ НА HUSL

Есть функция, нужно чтобы она срабатывала когда скролл доходит до нее

Ответы (1 шт):