Смена цвета хедера при скролле тильда - задача, с которой ко мне приходят почти на каждом втором лендинге на этом конструкторе: наверху шапка прозрачная или тёмная поверх баннера, а после прокрутки на 80-150 пикселей должна становиться белой или брендовой с тенью, чтобы меню читалось поверх контента блоков. Решается это либо встроенными настройками нового блока-шапки, либо коротким JS-скриптом, который вешает класс на хедер по событию scroll. Ниже - оба варианта с рабочим кодом и разбором, где обычно всё ломается на практике.
Зачем вообще менять цвет хедера при прокрутке
Чаще всего просят из-за баннера на первом экране: под тёмное фото или видео шапку делают прозрачной или с белым текстом без подложки, а как только пользователь начинает читать текст ниже, светлый или полупрозрачный хедер сливается с контентом и меню теряется. Смена цвета решает это одним движением - фон появляется, добавляется тень, текст меню при необходимости меняет цвет через отдельный класс.
Вторая причина - брендинг. У интернет-магазинов и курсов часто в шапке логотип светлого цвета на прозрачном фоне, а после скролла нужен фирменный цвет из палитры, чтобы шапка не терялась среди белых блоков каталога. На практике на лендингах с длинным первым экраном (от 700px и выше) без такой смены цвета конверсия в клик по меню заметно ниже - пользователи просто не видят, что шапка вообще кликабельна.
Встроенные настройки шапки - когда можно обойтись без кода
В новых блоках-хедерах Тильды (библиотека блоков T450 и выше, добавленная в 2022-2023 годах) есть готовая настройка без единой строчки кода. Открываете блок шапки, вкладку с оформлением меню и находите переключатель смены цвета при прокрутке - там задаются отдельно цвет фона и цвет текста для состояния «наверху страницы» и для состояния «после скролла».
Ограничение простое: настройка фиксированная, порог прокрутки (обычно около 50px) поменять нельзя, а работает она только в новых блоках библиотеки Header. В классических меню T028, T029 и в самодельных шапках через Zero Block такой опции нет вообще - там либо переезжаешь на новый блок, либо пишешь скрипт.
| Способ | Когда подходит | Гибкость порога | Нужен код |
|---|---|---|---|
| Встроенные настройки блока | новые Header-блоки, простой сценарий из двух цветов | нет, фиксированный | нет |
| JS-скрипт | любой блок-хедер, Zero Block, несколько порогов, разное поведение на скролле вверх/вниз | да, любое значение | да, простой JS и CSS |
Если задача укладывается в «было прозрачно - стало белым после 50px», меняю настройки в редакторе и трачу на это три минуты. Если нужен свой порог, блюр вместо сплошного фона или смена цвета логотипа отдельно от фона - без скрипта не обойтись.
Бесплатный материал
🎁 Полезный скрипт в подарок
Подпишитесь на Telegram - пришлю готовый скрипт по этой теме.
Без спама. Отписка в 1 клик.
Скрипт для смены цвета хедера при скролле в Тильде
Скрипт нужен в трёх случаях: шапка собрана вручную из Zero Block или T123, класс блока не из линейки Header, либо логика сложнее пары цветов - например, разный порог для десктопа и мобильной версии или смена цвета обратно при скролле вверх, а не только при возврате к самому верху.
Где искать класс своего блока-хедера
Открываю страницу в браузере, кликаю правой кнопкой по шапке и выбираю «Просмотреть код» - в разметке Тильды блоки идут с классами вида t228, t450, t123 и так далее в зависимости от типа блока. Проблема в том, что при копировании страницы или смене блока класс может измениться на другой номер, и скрипт перестанет находить элемент.
Надёжнее задать блоку свой ID через настройки блока в редакторе (поле «ID блока» в панели настроек) - тогда в CSS и JS используется постоянный идентификатор, который не слетит при редактировании страницы.
Код скрипта и CSS
Вешаю обработчик на scroll через requestAnimationFrame, чтобы не грузить браузер частыми вызовами, и переключаю класс на контейнере шапки:
(function () {
var header = document.querySelector('.t228'); // замените на класс своего блока
if (!header) return;
var threshold = 100; // порог в пикселях, после которого меняем цвет
var ticking = false;
function updateHeader() {
if (window.scrollY > threshold) {
header.classList.add('header-scrolled');
} else {
header.classList.remove('header-scrolled');
}
ticking = false;
}
window.addEventListener('scroll', function () {
if (!ticking) {
window.requestAnimationFrame(updateHeader);
ticking = true;
}
});
updateHeader();
})();CSS отвечает за сам переход цвета и должен идти отдельным блоком в настройках страницы или сайта:
.t228 {
background-color: transparent;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.t228.header-scrolled {
background-color: #ffffff !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}Вставляю скрипт и стили в настройках сайта: раздел «Ещё» → «Вставка кода в head» для CSS и «Код перед /body» для JS, если смена цвета нужна на всех страницах. Если только на одной посадочной - те же поля есть в настройках конкретной страницы.
Плавный переход, порог скролла и производительность
Bez transition цвет переключается рывком, и на видео это выглядит дёшево - обязательно добавляю transition на background-color и box-shadow вместе, иначе тень появляется мгновенно, а фон плавно, и разница режет глаз.
Порог в 100px - не универсальное значение, я обычно ставлю его равным примерно половине высоты первого экрана на конкретном макете: для лендинга с баннером на 800px беру 300-400px, чтобы цвет менялся уже после того, как баннер практически ушёл из вида, а не сразу после первого скролла мышью.
Отдельно слежу за конфликтом с собственным плавным скроллом Тильды (галочка «Плавная прокрутка» в настройках сайта) - она перехватывает событие scroll своим обработчиком, и на слабых мобильных устройствах два слушателя scroll вместе с requestAnimationFrame иногда дают заметный лаг при быстрой прокрутке. Если вижу подтормаживание, добавляю debounce на 16-20 мс поверх requestAnimationFrame или отключаю плавный скролл Тильды и делаю его отдельным более лёгким скриптом.
Мобильная версия и Zero Block
На мобильных Тильда часто рендерит отдельный блок бургер-меню поверх основного хедера, и если класс у него другой, скрипт для десктопной версии его просто не найдёт - приходится либо добавлять второй селектор через запятую в querySelector, либо давать общий класс обеим версиям шапки через настройки блока.
В Zero Block логика та же самая, потому что там код тоже вставляется через HTML/CSS/JS-код в настройках страницы, просто верстка шапки полностью ручная и классы задаёте сами при сборке. На одном из проектов - интернет-магазин с кастомной шапкой на Zero Block - понадобилось два порога: один для скрытия промо-полосы над меню, второй для смены цвета самого меню, и оба события вешались на один и тот же scroll-listener с разными threshold. Похожий готовый вариант скрипта с адаптацией под мобильное меню есть в библиотеке готовых скриптов для Тильды - можно взять за основу и подогнать классы под свой проект.
Типичные ошибки при настройке цвета хедера на скролле
- Шапка не зафиксирована (position: fixed или sticky) - класс переключается, но визуально ничего не меняется, потому что элемент уже ушёл вверх вместе со страницей.
- Забыт !important в CSS - у блоков Тильды часто есть инлайн-стили или более специфичные селекторы из редактора, которые перебивают ваш background-color.
- Скрипт вставлен только в настройках одной страницы, а сайт состоит из нескольких лендингов - на остальных страницах хедер остаётся однотонным без реакции на скролл.
- Класс подобран по номеру блока (t228, t450), который слетает при копировании страницы или пересборке хедера - после такого редактирования скрипт молчит, потому что элемента с этим классом больше нет.
- Z‑index хедера ниже, чем у слайдера или попапа первого экрана - цвет меняется корректно, но шапка визуально прячется под другими блоками.
- Тестирование только на десктопе - высота первого экрана на мобильном в разы меньше, и порог в 300px там срабатывает уже после второго блока контента, а не сразу под баннером.
Если самостоятельно разбираться некогда, обычно такие доработки я делаю в рамках кастомного скрипта под конкретный блок шапки - услуга по кастомным скриптам для Тильды начинается от 3 000 ₽ за точечную правку вроде смены цвета хедера и растёт, если добавляется интеграция с CRM или другими сервисами.
Когда стандартных блоков не хватает
Кастомный скрипт
от 3 000 ₽
Подробнее →Частые вопросы
Почему цвет хедера не меняется после вставки скрипта?
Чаще всего дело в неверном классе селектора - Тильда переприсваивает номера блоков при копировании и редактировании, поэтому querySelector ищет элемент, которого уже нет на странице. Проверьте класс через инспектор браузера заново или задайте блоку постоянный ID в настройках и используйте его вместо t‑класса.
Как сделать плавный переход цвета без рывка?
Добавьте transition сразу на все свойства, которые меняются: background-color, box-shadow и, если нужно, color для текста меню. Если переход прописан только для фона, а тень появляется мгновенно, разница будет заметна даже при коротком времени анимации в 0.3 секунды.
Можно ли настроить смену цвета хедера без кода, через настройки Тильды?
Да, если шапка собрана на блоке из библиотеки Header (T450 и новее) - там есть готовый переключатель с двумя цветами для состояний до и после скролла. Порог там фиксированный и тонко не настраивается, а в старых блоках меню и в Zero Block такой опции нет вообще, там нужен скрипт.
На каком расстоянии скролла лучше менять цвет хедера?
Ориентируйтесь на высоту первого экрана конкретного макета, а не на фиксированное число - обычно это 40-60% от высоты баннера. Отдельно проверьте порог на мобильной версии: там первый экран короче, и то же значение в пикселях может срабатывать слишком рано или слишком поздно.