04 · Визуал
Смена цвета меню при скролле в Tilda
готовый код.
Прозрачное меню получает фон и границу после начала прокрутки страницы.
Забрать код ↓- Технология
- CSS + JavaScript
- Установка
- 8 минут
- Куда вставлять
- Блок T123
- Обновлено
- 08.09.2026
/ Демонстрация
Сначала посмотрите,
как это работает.
Live demoМеню при скролле
Прокрутите поле или нажмите кнопку
Контент следующего экрана
/ Код
Скопируйте.
Вставьте. Опубликуйте.
Код не требует сборки или установки библиотек. Перед запуском замените значения, отмеченные в инструкции ниже.
Готовый код
<style>
#rec123456789 {
transition: background-color .3s ease, box-shadow .3s ease;
}
#rec123456789 .t396__artboard,
#rec123456789 .t228__maincontainer {
background: transparent !important;
transition: inherit;
}
#rec123456789.tselno-menu--scrolled {
background: rgba(242, 240, 233, .92);
box-shadow: 0 1px 0 rgba(16, 17, 15, .18);
backdrop-filter: blur(16px);
}
</style>
<script>
(function () {
var menu = document.querySelector('#rec123456789');
if (!menu) return;
function updateMenu() {
menu.classList.toggle('tselno-menu--scrolled', window.scrollY > 40);
}
updateMenu();
window.addEventListener('scroll', updateMenu, { passive: true });
})();
</script>/ Установка
Четыре шага.
- 01
Откройте настройки блока меню и скопируйте его номер вида rec123456789.
- 02
Замените #rec123456789 во всех трёх местах кода на номер вашего блока.
- 03
Вставьте код в T123 на этой же странице или в общий футер.
- 04
Опубликуйте страницу и проверьте начальное состояние и вид после прокрутки.
/ Настройки
Подстройте под себя.
- Порог
- Число 40 в window.scrollY > 40 задаёт момент изменения меню.
- Фон
- Измените rgba(242, 240, 233, .92) на свой цвет и прозрачность.
- Размытие
- Свойство backdrop-filter. Его можно удалить, если нужен сплошной фон.
/ Нужна доработка
Не нашли нужное?
Соберём под ваш сайт.
Опишите задачу и пришлите ссылку на страницу. Посмотрим, можно ли решить её готовым кодом или нужна индивидуальная разработка.
Обсудить в Telegram ↗