Как сделать меню в ZeroBlock с фиксацией при скролле и анимацией фона для Tilda
Бензиновые генераторы
Для автономного электроснабжения загородных домов
Скидка 50% до конца февраля. Спешите!
Days
Hours
Minutes
Seconds
Оставь заявку сейчас и получи запас масла на 3 года
Нажимая на кнопку "Отправить" вы соглашаетесь с обработкой персональных данных
Скидка 50% до конца февраля. Спешите!
Days
Hours
Minutes
Seconds
Оставь заявку сейчас и получи запас масла на 3 года
Нажимая на кнопку "Отправить" вы соглашаетесь с обработкой персональных данных

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

1
Создали ZeroBlock
2
Создали в нём контент для меню
3
Добавили стиль в блок Другое - Т123
В стиле прописали ID Zero
#rec42417565
Продажа бензиновых и дизельных
генераторов от официального представителя
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>
Made on
Tilda