URL скопирован в буфер обмена!

Как показать и скрыть фиксированное меню по скролу?

При помощи данной модификации реализовать меню в Zero Block, которое автоматически скрывается при прокрутке вниз и отображается при прокрутке вверх. Дополнительно можно указать положение фиксации и выбрать тип анимации (частичное или полное скрытие).

Модификация обновлена. Добавлена поддержка нескольких меню на странице
Модификация работает с включенным Autoscale в блоках
Модификация работает с Zero Block и стандартными блоками
Номер модификации в библиотеке TiCode

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

Класс меню
Позиция фиксации меню
Через сколько пикселей скрываем
Видимость меню при загрузке страницы
Свой z-index (опционально)
Тип скрытия
Высота в px которую скрываем
Войдите в аккаунт чтобы получить доступ к генератору кода
Этот генератор кода доступен только тем кто оплатил подписку
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev --> <!--TCD061--><script> document.addEventListener("DOMContentLoaded", function () { var TiScrollMenus = document.querySelectorAll(".uc-tiscrollmenu"); var HideTiCodeThreshold = 300; TiScrollMenus.forEach(function(TiScrollMenu) { var TiLastPosition = window.scrollY; var TiAccumulatedScroll = 0; window.addEventListener("scroll", function () { var TiCodePosition = window.scrollY; var ScrollTiDelta = TiCodePosition - TiLastPosition; if ((ScrollTiDelta > 0 && TiAccumulatedScroll < 0) || (ScrollTiDelta < 0 && TiAccumulatedScroll > 0)) { TiAccumulatedScroll = 0; } TiAccumulatedScroll += ScrollTiDelta; if (Math.abs(TiAccumulatedScroll) > HideTiCodeThreshold) { if (TiAccumulatedScroll > 0) { TiScrollMenu.style.transition = "opacity 0.5s ease-in-out, transform 0.5s ease-in-out"; TiScrollMenu.classList.add("hidden"); } else { TiScrollMenu.style.transition = "opacity 0.5s ease-in-out, transform 0.5s ease-in-out"; TiScrollMenu.classList.remove("hidden"); } TiAccumulatedScroll = 0; } TiLastPosition = TiCodePosition; }); }); }); </script> <style> .uc-tiscrollmenu { position: fixed; top: 0; width: 100%; z-index: 9999; } .uc-tiscrollmenu.hidden { opacity: 0; transform: translateY(-100%); } </style>
КОПИРОВАТЬ КОД
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Создаем Zero Block и назначаем ему класс uc-tiscrollmenu
Чтобы добавить класс блоку, заходим в настройки блока и сверху от id блока будет кнопка "Добавить CSS Class Name"

2. При необходимости указываем дополнительные настройки в генераторе кода:
Позиция фиксации меню - выбираем место фиксации меню (вверху или снизу экрана).
Дистанция скрытия/показа - указываем расстояние в пикселях через которое будем скрывать и показывать меню. Например, если указали 300, то прокрутив 300 пикселей вниз, меню скроет. Прокрутив 300 пикселей вверх покажет меню.
Видимость меню при загрузке страницы - если включено, то при загрузке и обновлении страницы меню изначально будет видно.
Свой z-index (опционально) - указываем свой z-index при необходимости. Элементы с большим z-index перекрывают элементы с меньшим.
Тип скрытия - указываем дистанцию скрытия меню: Полностью - меню будет скрыто полностью, Наполовину - меню скроет наполовину (подходит если нужно скрыть меню которое сделали в Zero BLock с включённым автоскейлом), Указать свое значение - указываем число в пикселях (Например высота вашего меню 150 пикселей и при прокрутке нужно оставить только меню высотой 50 пикселей. Указываем в генератор значение 100)

4. Копируем готовый код и вставляем в HTML блок Т123.
LOGO
Обратный звонок
Made on
Tilda