Как сделать меню в ZeroBlock с фиксацией при скролле и анимацией фона для Tilda

Бензиновые генераторы

Для автономного электроснабжения загородных домов

Скидка 50% до конца февраля. Спешите!

Days

Hours

Minutes

Seconds

Оставь заявку сейчас и получи запас масла на 3 года

Скидка 50% до конца февраля. Спешите!

Days

Hours

Minutes

Seconds

Оставь заявку сейчас и получи запас масла на 3 года

Как сделать меню в ZeroBlock с фиксацией при скролле и анимацией фона для Tilda

1

Создали ZeroBlock

2

Создали в нём контент для меню

3

Добавили стиль в блок Другое - Т123
В стиле прописали ID Zero
#rec42417565

Продажа бензиновых и дизельных
генераторов от официального представителя

8 (495) 151-29-30

8 (800) 555-19-08

Обратный звонок

Mo-ti Level Up

Видео инструкции по добавлению кода и работе с Zero Block.

Получить полное видео

Посмотреть все видео

Создаём меню, которое всегда следует за нами при скролле сайта из ZeroBlock
Длительность видео: 14 мин

Фрагмент видео

Посмотреть видео в личном кабинете ►

Библиотека для примера


<style>
.fixed {
    position: fixed;
    width: 100%;
    top: 0px;
    z-index: 9999;
    transform: translateY(-100%); 
}
.fonmenu{
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    transform: translateY(0%) !important;
}
.transtime{transition:  all 0.4s cubic-bezier(0, 0, 0.8, 1.0)}
</style>
<script>
$(document).ready(function(){
    let scrolldistance = 10; //Дистанция скролла
    let blockMenuID = '#rec166003122'; //ID Zero
    $(blockMenuID).addClass('fixed');
    setTimeout(function(){ 
        $(blockMenuID).addClass('transtime')
        if($(document).scrollTop()>scrolldistance){$(blockMenuID).addClass('fonmenu')};
    }, 500);
    $(window).scroll(function() { 
        var top = $(document).scrollTop();
        //Если перемещение больше 10 px
        if (top >= scrolldistance) { 
          $(blockMenuID).addClass('fonmenu');
        } else {
          $(blockMenuID).removeClass('fonmenu'); 
        }
    });
});
</script>