В Zero Block есть опция, которая позволяет закрепить блок при прокрутке страницы с анимацией появления, но нельзя настроить её время. Если нужна более плавная анимация, можно использовать эту модификацию. Скрипт повторяет механику из Zero Block, но с возможностью задать время анимации.
Инструкция по установке
- Создаём Zero Block и назначаем ему класс uc-tcdmenu
- Копируем код в 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: расширяет возможности стандартного блока меню на Тильда