Боковая панель при скролле первое время не движется, а после плавно возвращается на своё место

Question

Есть боковая панель. При скролле она должна 0,1 секунду не двигаться, а после возвращаться на своё место с затуханием движения. Должно примерно работать как кнопки поддержки или "Позвоните нам" на некоторых сайтах, когда при скролле эта кнопка уходит вверх, а потом "падает" вниз страницы на своё место.

Answer 1

Если я вас правильно понял, вы можете использовать

setTimeout(() => {
 //your code
}, 100)

для того чтобы задать таймер на 0.1 секунду. В функции таймера вы можете назначить класс для старта анимации. На счет анимирования скролла ничего сказать не могу, но попробуйте посмотреть это видео или же эту либу.

Answer 2

можно улучшать конечно, но делает что нужно. если обязательна задержка 0.1 сек - добавляйте в анимацию, либо ставьте выше предел в обработчике события (scrollTop > 500). также обращайте внимание на длительность анимации (.25s) и задержку (setTimeout(..., 250)). затухание двидения также можно править в анимации (используя ease-in, ease-out и т.д.)

document.getElementById('scroll').addEventListener('scroll', (e) => {
                const {scrollTop} = e.target;
                const animated = document.getElementById('animated');
                if (scrollTop > 500) {
                    if (animated.classList.contains('show')) {
                        animated.classList.remove('show');
                        animated.classList.add('hide');
                        setTimeout(() => {
                            animated.style.display = 'none';
                        }, 250);
                    }
                } else {
                    if (animated.classList.contains('hide')) {
                        animated.style.display = 'block';
                        animated.classList.remove('hide');
                        animated.classList.add('show');
                    }
                }
            });

.test-container {
        width: 100vw;
        height: 200vh;
        background-color: #F2994A;
        overflow-y: scroll;
    }

    .test-item {
        width: 80vw;
        height: 20vh;
        margin: 20px;
        background-color: #c4c4c4;
    }

    .animated-container {
        width: 100px;
        height: 30vh;
        position: absolute;
        top: 20px;
        background-color: #333333;
    }

    .show {
        animation: showAnimatedContainer .25s 1;
    }

    .hide {
        animation: hideAnimatedContainer .25s 1;
    }

    @keyframes showAnimatedContainer {
        0% {
            left: -100px;
            opacity: 0;
        }
        100% {
            left: 0;
            opacity: 1;
        }
    }

    @keyframes hideAnimatedContainer {
        0% {
            left: 0;
            opacity: 1;
        }
        100% {
            left: -100px;
            opacity: 0;
        }
    }

<div class="test-container" id="scroll">
        <div class="animated-container show" id="animated"></div>
        <div class="test-item"></div>
        <div class="test-item"></div>
        <div class="test-item"></div>
        <div class="test-item"></div>
        <div class="test-item"></div>
        <div class="test-item"></div>
        <div class="test-item"></div>
        <div class="test-item"></div>
        <div class="test-item"></div>
        <div class="test-item"></div>
        <div class="test-item"></div>
        <div class="test-item"></div>
        <div class="test-item"></div>
        <div class="test-item"></div>
        <div class="test-item"></div>
        <div class="test-item"></div>
        <div class="test-item"></div>
        <div class="test-item"></div>
        <div class="test-item"></div>
        <div class="test-item"></div>
        <div class="test-item"></div>
        <div class="test-item"></div>
        <div class="test-item"></div>
        <div class="test-item"></div>
        <div class="test-item"></div>
        <div class="test-item"></div>
        <div class="test-item"></div>
        <div class="test-item"></div>
    </div>

БЛОГ НА HUSL

Боковая панель при скролле первое время не движется, а после плавно возвращается на своё место

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