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

2025-03-13 21:45 Меню

В Zero Block есть опция, которая позволяет закрепить блок при прокрутке страницы с анимацией появления, но нельзя настроить её время. Если нужна более плавная анимация, можно использовать эту модификацию. Скрипт повторяет механику из Zero Block, но с возможностью задать время анимации.

Инструкция по установке

Создаём Zero Block и назначаем ему класс uc-tcdmenu

Чтобы добавить класс блоку, заходим в настройки блока и сверху от id блока будет кнопка "Добавить CSS Class Name"

Копируем код в HTML блок T123;
В скрипте можно указать через сколько пикселей при скролле показываем меню и время анимации при появлении;

<!--TICODE --><!-- Плавное появление меню с фиксацией при скролле | https://ticode.dev  -->
<script>
document.addEventListener("DOMContentLoaded", function () {
    var TiScrollMenus = document.querySelectorAll(".uc-tcdmenu");
    var Tiindent = 500; /* Через сколько пикселей при прокрутке показываем меню */
    TiScrollMenus.forEach(function (TiScrollMenu) {
        TiScrollMenu.style.position = "fixed";
        TiScrollMenu.style.top = "0";
        TiScrollMenu.style.width = "100%";
        TiScrollMenu.style.zIndex = "9999";
        TiScrollMenu.style.opacity = "0";
        TiScrollMenu.style.transition = "none";
        setTimeout(() => {
            TiScrollMenu.style.transition = "opacity 1s ease-in-out"; /* время появлени меню 1 секунда */
        }, 0);
        
        window.addEventListener("scroll", function () {
            if (window.scrollY > Tiindent) {
                TiScrollMenu.style.opacity = "1";
            } else {
                TiScrollMenu.style.opacity = "0";
            }
        });
    });
});
</script>

Другие модификации для меню на Tilda

Активный пункт меню в Zero Block: помогает подсветить текущий раздел и улучшить навигацию.
Скрытие и показ меню при прокрутке страницы: лучшее решение для сайтов с большим меню
Дополнительная ссылка для кнопки ME601: расширяет возможности стандартного блока меню на Тильда

{$co}

TiCode