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

С помощью этой модификации можно сделать фиксированное меню при прокрутке страницы. Фиксируем Zero Block или любой стандартный блок при скроле

Модификация обновлена. Появилась возможность скрывать блок меню при достижении футера. Обновлена инструкция.

Модификация работает с включенным Autoscale в блоках

Модификация работает с Zero Block и стандартными блоками

Номер модификации в библиотеке TiCode

Генератор кода

поделиться модификацией

Класс Zero Block

Фиксация меню

Скрыть меню при достижении футера

войти

Войдите в аккаунт чтобы получить доступ к генератору кода

регистрация

<style> .uc-menu { position: fixed; top: 0; left: 0; width: 100%; z-index: 9998; transition: opacity 0.3s ease; } .uc-menu.hidden { opacity: 0; pointer-events: none; } </style> <script> document.addEventListener('scroll', function () { const TCDendmenu = document.querySelector('.uc-menu'); if (!TCDendmenu) return; const TCDdistanceEnd = window.scrollY; const TCDviewportHeight = window.innerHeight; const TCDdocumentHeight = document.documentElement.scrollHeight; if (TCDdistanceEnd + viewportHeight >= TCDdocumentHeight - 150) { TCDendmenu.classList.add('hidden'); } else { TCDendmenu.classList.remove('hidden'); } }); </script>

КОПИРОВАТЬ КОД

1. Создаем меню в Zero Block и указываем блоку класс uc-menu
Чтобы добавить класс блоку, заходим в настройки блока и сверху от id блока будет кнопка "Добавить CSS Class Name"

2. При необходимости указываем дополнительные настройки в генераторе:
Фиксация меню - выбираем место фиксации меню (вверху или снизу экрана);
Скрыть меню при достижении футера - если включено, меню автоматически исчезнет, когда до конца страницы останется 150 пикселей.

3. Копируем готовый код и вставляем в HTML блок T123.

LOGO

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