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

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

В справке Tilda есть скрипт для реализации меню в ZeroBlock, но у многих не получается его использовать.
На этом примере будет наглядно видно как создать такое меню

Скрипт добавляется в блок ДРУГОЕ►Т123
СПИСОК ВСЕХ ВИДЕО
Видеоинструкция данного примера
Видеоинструкция данного примера доступна в архиве
mo-tilda Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создаём меню из примера
2. Создаём меню со статичным фоном
3. Как избежать "скачков" на сайте
4. Меню наползает на заголовок
3. Появление меню через N-пикселей
4. Статичное и фиксированное меню из ZeroBlock, варианты комбинаций

Создаём меню, которое всегда следует за нами при скролле сайта из ZeroBlock
Длительность видео: 21 мин
Подписка к видеоинструкции на платной основе
<style>
/*Выставляем фиксированную позицию на экране и номер слоя выше остальных*/
.fixed {
 width: 100%;
 position: fixed;
 top: 0px;
 z-index: 9999;
 /*Задаём время и характер анимации для фона меню */
 transition:all 0.6s cubic-bezier(0, 0, 0.8, 1.0);
}

.fonmenu{
 /*Задаём цвет фона для меню*/  
 background:#000000;
    
}

</style>

<script>
$(document).ready(function(){
    /* нужно заменить на код блока  Zero выполняющего роль меню */
    var blockMenuID = '#rec42417565';
    //Добавляем класс с фиксацией
    $(blockMenuID).addClass('fixed');
   //Когда начался скролл экрана
    $(window).scroll(function() { 
        var top = $(document).scrollTop();
        //Если перемещение больше 5 px
        if (top >= 5) { 
        //То добавляем к меню наш фон
          $(blockMenuID).addClass('fonmenu');
        } else {
        //Если поднялись наверх, то удаляем фон    
          $(blockMenuID).removeClass('fonmenu'); 
            
        }
    });
});
</script>
Made on
Tilda