Инерция блока при скролле страницы
Есть небольшой блок с position fixed, расположенные слева в центре экрана. Нужно, чтобы при скролле он как бы отставал, а после, когда перестали скроллить плавно возвращался на своё место. Пытался добавить ему нужный класс в зависимости от того, происходит скролл страницы вверх или вниз, и уже в css изменял этому блоку с нужным классом позиционирование. Но происходит это очень дёргано и не красиво. Хотелось бы, чтобы всё было плавно. Подскажите, пожалуйста, как это можно сделать
Ответы (1 шт):
Автор решения: Андрей
→ Ссылка
Решил задачу следующим кодом:
let lastScroll = 0;
window.addEventListener('scroll', pc_scroll);
function pc_scroll() {
let st = pageYOffset;
let mobLink = document.querySelector('.pc-links');
if (st > lastScroll) {
mobLink.style.setProperty('top', `calc(50% - ${(st-lastScroll)}px)`);
} else {
mobLink.style.setProperty('top', `calc(50% + ${-(st-lastScroll)}px)`);
}
lastScroll = st;
if (st == lastScroll) {
setTimeout(function () {
mobLink.style.setProperty('top', '50%');
}, 100);
}
}