@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.
  • Вопрос задан
  • 76 просмотров
Решения вопроса 1
hahenty
@hahenty
('•')
Жаль, что нет такого события "отсутствие прокрутки". А пытаться сравнивать смещение для такой задачи в общем бессмысленно.
+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 искать отдельно.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Kvason
Веб-разработчик
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы