Как сделать полупрозрачность при скролле?

Question

[by_ultra]

Доброго дня.
Не могу найти подходящую реализацию следующего вида.
Когда сроллится контент появляется полупрозрачность 0.1, но как только сроллинг прекращается, полупрозрачность становится 1.
Пытался реализовать следующим образом, что-то пошло не так)

let elem = document.querySelector('.ut-table_body'),
    posTop = elem.offsetTop;
window.addEventListener('scroll', function () {
    if(this.pageYOffset >= posTop) {
        elem.classList.add('animate-opacity');
    } else {
        elem.classList.remove('animate-opacity');
    }
}, false);

Буду благодарен за реализацию на JS или Jquery.

Answer 1

[Сергей Сергей]

Жаль, что нет такого события "отсутствие прокрутки". А пытаться сравнивать смещение для такой задачи в общем бессмысленно.

+const opacResume = debounce( () => elem.classList.remove('animate-opacity'), 500 );

window.addEventListener('scroll', function () {
-    if(this.pageYOffset >= posTop) {
-    } else {
        elem.classList.remove('animate-opacity');
-    }
+    opacResume();
}, false);

что такое debounce искать отдельно.

Comments

[by_ultra]

Спасибо за предложенный вариант.
Но, что-то не отрабатывает данный код, или я что-то сделал не правильно.

Если не трудно, могу Вас попросить закинуть в песочницу рабочую версию.
Буду очень благодарен.

[Сергей Сергей]

by_ultra,

Answer 2

[Kvason]

https://codepen.io/vankvas/pen/LYeEbWJ