Меню исчезает при скролле вниз и появляется при скролле вверх в Tilda
 
О Люмен Банке
«Люмен Банк» — успешный российский банк, существует с 1995 года и представлен офисами в России и странах СНГ. Мы предлагаем широкий выбор услуг для частных и корпоративных клиентов. Мы открываем новый офис в Саратове и заинтересованы в привлечении опытных и начинающих специалистов.

Сайт компании: lumenbank.bt
Наши ценности
  • Узнаем новое каждый день
    Каждый новый день у нас — повод гордиться тем, что сделано, и возможность узнать что-то новое. Мы всегда голодны до новых свершений.
  • Расширяем горизонты
    Мы активно работаем с клиентами и открываем новые офисы по всей стране. Мы не стоим на месте и постоянно развиваемся.
  • Заботимся о сотрудниках
    Мы заботимся о своих коллегах. Каждый человек – активный и ключевой игрок в рабочем процессе банка. Наша цель – сделать так, чтобы сотрудникам было комфортно.
  • Поддерживаем репутацию
    Мы – фанаты своего дела, и к созданию каждого продукта прикладываем максимум усилий. Клиенты ценят наши продукты, потому у нас высокие стандарты качества.
Мы стремимся к новым стандартам работы в банке и всегда работаем на будущее.
Сергей Милавин, HR-директор
Мы стремимся к новым стандартам работы в банке и всегда работаем на будущее.
Сергей Милавин, HR-директор

Меню исчезает при скролле вниз и появляется при скролле вверх в Tilda

1
Создали блок меню (стандарт или ZeroBlock), оставляем статичный режим, не включаем фиксацию
2
Задали ему класс uc-scrollmenu
3
Добавили нужный код в блок Другое - Т123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Получить полное видео
Посмотреть все видео
Делаем так, чтобы меню исчезло, когда скроллим вниз, и появилось, когда скроллим вверх.
Пример для стандартного блока и ZeroBlock
Фрагмент видео
Посмотреть видео в личном кабинете ►
Библиотека для примера
<script>
document.addEventListener("DOMContentLoaded", function() {
    (function () {
            const threshold = 100; // Дистанция, через  которую происходит скрытие при скролле
        
            const scrollMenu = document.querySelector('.uc-scrollmenu');
            if (!scrollMenu) return;
            
            let lastScrollTop = 0;
            let scrollDistance = 0;
            
            let ticking = false;
            
            function updateScrollState() {
                const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
                
                if (currentScrollTop > lastScrollTop) {
                    scrollDistance += currentScrollTop - lastScrollTop;
                    
                    if (scrollDistance > threshold) {
                        scrollMenu.classList.add('hide-menu');
                    }
                } else {
                    scrollMenu.classList.remove('hide-menu');
                    scrollDistance = 0;
                }
                
                lastScrollTop = currentScrollTop;
                ticking = false;
            }
            
            function handleScroll() {
                if (!ticking) {
                    requestAnimationFrame(updateScrollState);
                    ticking = true;
                }
            }
            window.addEventListener('scroll', handleScroll);
 
    })();    
});    
</script>


<style>
.uc-scrollmenu{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    transition:  all 0.4s cubic-bezier(0, 0, 0.8, 1.0)
}
.hide-menu{
    transform: translateY(-100%)
}
</style>
Made on
Tilda