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

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

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

1
Создали блок меню (стандарт или ZeroBlock)
2
Задали ему класс uc-scrollmenu
3
Добавили нужный код в блок Другое - Т123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Получить полное видео
Посмотреть все видео
Делаем так, чтобы меню исчезло, когда скроллим вниз, и появилось, когда скроллим вверх.
Пример для стандартного блока и ZeroBlock
Фрагмент видео
Посмотреть видео в личном кабинете ►
Библиотека для примера
Стандартный блок

<script>
$(document).ready(function(){
let distance = 200; // Дистанция видимости или сткрытия от верха страницы
let startHide = false;// Видно или скрыто при старте  true / false

let menuID = $('.uc-scrollmenu');
setTimeout(function(){
    menuID.addClass('menu-st');  
    if(!startHide){
        let top = $(document).scrollTop();
        if(top<distance){
            menuID.addClass('show-menu');
        };
    };
}, 100);

let scrollPrev = 0; 
$(window).scroll(function() { 
        let top = $(document).scrollTop();
		if ( (top > scrollPrev) && (top >= distance) ) { 
		    $('.menu-st').removeClass('show-menu');
		}else{ 
		    $('.menu-st').addClass('show-menu'); 
		    if(startHide && top < distance){
		        $('.menu-st').removeClass('show-menu');
		    }else{
		        $('.menu-st').addClass('show-menu');
		    };
		};
		scrollPrev = top;
});
});
</script>

<style>
.menu-st {transition:  all 0.4s cubic-bezier(0, 0, 0.8, 1.0)}
.uc-scrollmenu{
    transform: translateY(-100%);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;
}
.uc-scrollmenu.show-menu{
    transform: translateY(0%)
}
</style>
Библиотека для примера
для ZeroBlock

<script>
$(document).ready(function(){
let distance = 200; // Дистанция видимости или сткрытия от верха страницы
let startHide = true;// Видно или скрыто при старте  true / false

let menuCl = $('.uc-scrollmenu');
setTimeout(function(){
    menuCl.find('.t396__artboard').addClass('menu-st');  
    if(!startHide){
        let top = $(document).scrollTop();
        if(top<distance){
            menuCl.find('.t396__artboard').addClass('show-menu');
        };
    };
}, 100);

let scrollPrev = 0; 
$(window).scroll(function() { 
        let top = $(document).scrollTop();
		if ( (top > scrollPrev) && (top >= distance) ) { 
		    $('.menu-st').removeClass('show-menu');
		}else{ 
		    $('.menu-st').addClass('show-menu'); 
		    if(startHide && top < distance){
		        $('.menu-st').removeClass('show-menu');
		    }else{
		        $('.menu-st').addClass('show-menu');
		    };
		};
		scrollPrev = top;
});
});
</script>

<style>
.menu-st {transition:  all 0.4s cubic-bezier(0, 0, 0.8, 1.0)}
.uc-scrollmenu .t396__artboard
{transform: translateY(-100%)}
.uc-scrollmenu .t396__artboard.show-menu
{transform: translateY(0%)}
.uc-scrollmenu{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;    
}
.uc-scrollmenu { pointer-events:none}
.menu-st.show-menu { pointer-events:all}
</style>
Made on
Tilda