Заказать проект

Заполните данные и я свяжусь с Вами, для детального обсуждения.

Любой сайт использует файлы cookie

ОК, буду знать

Как скрыть и показать фиксированное меню по скроллу в Zero Block?

Для зероблока, который необходимо скрывать и отображать по скроллу назначить класс uc-szmenu

Скопировать весь код ниже и вставить его в блок HTML-код T123

Инструкция

Открыть пример

При помощи данного скрипта можно реализовать меню в Zero Block, которое автоматически скрывается при прокрутке вниз и отображается при прокрутке вверх.

<!-- Как скрыть и показать фиксированное меню по скроллу в Zero Block? https://dessup.ru/blog/professional-blog/menu-zeroblock-->
<style>
.menu-st {transition:  all 0.4s cubic-bezier(0, 0, 0.8, 1.0)}
.uc-szmenu .t396__artboard
{transform: translateY(-100%)}
.uc-szmenu .t396__artboard.show-menu
{transform: translateY(0%)}
.uc-szmenu {position: fixed; top: 0; width: 100%; z-index: 999; }
.uc-szmenu {pointer-events:none}
.menu-st.show-menu {pointer-events:all}
</style>

<script>
$(document).ready(function(){
let distance = 250; // Дистанция видимости/сткрытия от верха страницы
let startHide = false;// Видно или скрыто при старте  true / false
let menuCl = $('.uc-szmenu');
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;
});
});
//https://dessup.ru/blog/professional-blog/menu-zeroblock
</script>