URL скопирован в буфер обмена!
Как сделать дубль блока меню с фиксацией при скролле на Tilda?
Эта модификация позволяет создать дубль Zero Block с меню, который фиксируется и отображается при прокрутке страницы, например, после 500 пикселей. Теперь нет необходимости создавать два отдельных меню — одно для статичной шапки и второе для прокрутки.
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
Класс блока меню
Показываем дубль блока
Показать блок через (px)
Скрыть блок за (px) до футера
Тип анимации
Время анимации
z-index дубля
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD000--><style>
.uc-tidbl .t396__artboard {
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
opacity: 1;
}
.uc-tidbl .t396__artboard.hidden {
opacity: 0;
transform: translateY(-100%);
pointer-events: none;
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}
.uc-tidbl-duplicate {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
.uc-tidbl-duplicate.visible {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", () => {
const TCDoriginalMenu = document.querySelector(".uc-tidbl .t396__artboard");
const TCDtopMove = 500;
const TCDbottomMove = 100;
if (TCDtopMove > 0) {
setTimeout(() => {
const TCDduplicateMenu = document.querySelector(".uc-tidbl").cloneNode(true);
TCDduplicateMenu.classList.add("uc-tidbl-duplicate");
document.body.appendChild(TCDduplicateMenu);
window.addEventListener("scroll", () => {
const TiCodescrollY = window.scrollY || document.documentElement.scrollTop;
const TcdocumentHeight = document.documentElement.scrollHeight;
const TcwindowHeight = window.innerHeight;
const TcdistanceToBottom = TcdocumentHeight - (TiCodescrollY + TcwindowHeight);
if (TiCodescrollY > TCDtopMove) {
TCDduplicateMenu.classList.add("visible");
TCDoriginalMenu.classList.add("hidden");
} else {
TCDduplicateMenu.classList.remove("visible");
TCDoriginalMenu.classList.remove("hidden");
}
if (TcdistanceToBottom < TCDbottomMove) {
TCDduplicateMenu.classList.remove("visible");
}
});
}, 1000);
} else {
window.addEventListener("scroll", () => {
const TiCodescrollY = window.scrollY || document.documentElement.scrollTop;
const TcdocumentHeight = document.documentElement.scrollHeight;
const TcwindowHeight = window.innerHeight;
const TcdistanceToBottom = TcdocumentHeight - (TiCodescrollY + TcwindowHeight);
if (TcdistanceToBottom < TCDbottomMove) {
if (!TCDoriginalMenu.classList.contains("hidden")) {
TCDoriginalMenu.classList.add("hidden");
}
} else {
if (TCDoriginalMenu.classList.contains("hidden")) {
TCDoriginalMenu.classList.remove("hidden");
}
}
});
}
});
</script>
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Создаем Zero Block с меню и присваиваем ему класс uc-tidbl
Чтобы добавить класс блоку, заходим в настройки блока и сверху от id блока будет кнопка "Добавить CSS Class Name"
2. Указываем дополнительные настройки в генераторе:
Показываем дубль блока - выбираем позицию для вывода дубля меню. Блок будет зафиксирован сверху или снизу;
Показать блок через (px) - указываем через какое количество пикселей нужно показать блок меню. Если указали 0, то дубль блока создаваться не будет, а скрипт будет работать с основным блоком меню. Например, если вы зафиксировали зеро блок при помощи функционала тильда и вам нужно чтобы скрипт скрывал этот блок при достижении футера(стандартным функционалом тильда такое реализовать нельзя);
Скрыть блок за (px) до футера - указываем за сколько пикселей до конца страницы нужно скрыть зеро блок. Если указать 0, то блок не будет прятать;
Тип анимации - выбираем тип анимации при показе блока;
Время анимации - указываем время для анимации. Лучше указывать в промежутке от 0.3 до 3;
Z-index дубля - указываем число выше если блок меню невидно или его перекрывают другие блоки на сайте;
3. Копируем готовый код и вставляем в HTML блок Т123
Чтобы добавить класс блоку, заходим в настройки блока и сверху от id блока будет кнопка "Добавить CSS Class Name"
2. Указываем дополнительные настройки в генераторе:
Показываем дубль блока - выбираем позицию для вывода дубля меню. Блок будет зафиксирован сверху или снизу;
Показать блок через (px) - указываем через какое количество пикселей нужно показать блок меню. Если указали 0, то дубль блока создаваться не будет, а скрипт будет работать с основным блоком меню. Например, если вы зафиксировали зеро блок при помощи функционала тильда и вам нужно чтобы скрипт скрывал этот блок при достижении футера(стандартным функционалом тильда такое реализовать нельзя);
Скрыть блок за (px) до футера - указываем за сколько пикселей до конца страницы нужно скрыть зеро блок. Если указать 0, то блок не будет прятать;
Тип анимации - выбираем тип анимации при показе блока;
Время анимации - указываем время для анимации. Лучше указывать в промежутке от 0.3 до 3;
Z-index дубля - указываем число выше если блок меню невидно или его перекрывают другие блоки на сайте;
3. Копируем готовый код и вставляем в HTML блок Т123
