Как я могу слушать div в режиме реального времени и добавить или удалить класс на колесе мыши с помощью jquery?

Question

Я хочу добавить / удалить класс для определенного div на колесе мыши, но почему-то это не работает.

Я пытался проверить, есть ли у div этот класс, но оператор if никогда не работал так, как ожидалось.

Я ожидал прокрутки с помощью колесика мыши, КОГДА класс удаления маски добавлялся, НЕ когда маска на экране.

Редактировать: Даже минимальный код дает мне "Похоже, ваш пост в основном код; пожалуйста, добавьте еще несколько деталей. "ошибка, поэтому я сделал ручку об этом. https://codepen.io/kayahan/pen/YzzPwbR

<section class="video-section section">
    <div class="mask"></div>            
</section>

<section class="section">
    a
</section>

<section class="section">
    b
</section>



$(window).on('wheel', function (e) {

    var delta = e.originalEvent.deltaY;


    if (delta > 0 && $('.video-section').offset().top === 0) {
        $('.mask').addClass('remove-mask');
        $('.video-section').bind('mousewheel DOMMouseScroll', stopScrolling);
    }

    if (delta > 0 && $('.mask').hasClass('remove-mask')) {
        console.log('here is not working');
    }

    if (delta < 0 && $('.video-section').offset().top === 0) {
        $('.mask').removeClass('remove-mask');
        return false;
    }

});

function stopScrolling(e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
}

Answer 1

Для тех, кому нужно решение, я наконец нашел его.

Чтобы прослушать событие колеса, вы можете использовать код о, но также использовать функцию getBoundingClientRect () в javascript. Это исправило все:

var scrollCount = 0;

$(window).on('wheel', function (e) {
    .
    .
    .
    .

    if (scrollCount <= 1 && removeMask.getBoundingClientRect().y <= 0) {
        $('#pagepiling').pagepiling();
    }

});