Введение
Динамическое изменение цвета и фона шапки при прокрутке страницы — отличный способ улучшить пользовательский опыт и добавить интерактивности вашему сайту на Tilda. В этой статье мы рассмотрим, как реализовать эту функцию для двух типов шапок: созданной в Zero block и стандартного блока ME301, учитывая особенности мобильной версии.
Изменение цвета и фона шапки в Zero block
Подготовка шапки
Добавление кода
- Добавьте на страницу блок T123.
- Вставьте в него следующий JavaScript код:
<script>
// ======= НАСТРОЙКИ (ИЗМЕНИТЕ ИХ ПО ВАШЕМУ ЖЕЛАНИЮ) =======
// ID вашего блока шапки (Zero block)
var headerId = 'rec000000000';
// Цвет или фоновое изображение шапки ДО скролла
var initialBackground = 'white';
// Пример для цвета: 'white' или '#ffffff'
// Пример для изображения: 'url(https://example.com/image.jpg)'
// Цвет или фоновое изображение шапки ПОСЛЕ скролла
var scrolledBackground = '#303030';
// Пример для цвета: 'black' или '#000000'
// Пример для изображения: 'url(https://example.com/another-image.jpg)'
// Расстояние скролла (в пикселях), после которого меняется фон шапки
var scrollThreshold = 130;
// ======= КОНЕЦ НАСТРОЕК =======
// Функция для создания и добавления стилей
function addStyles() {
var style = document.createElement('style');
style.textContent = `
.fixtop {
width: 100%;
position: fixed;
top: 0px;
z-index: 9999;
overflow: hidden;
transition: 0.2s ease-out;
background: ${initialBackground};
}
.menuscroll {
background: ${scrolledBackground};
transition: 0.2s ease-out;
}
`;
document.head.appendChild(style);
}
// Функция для добавления класса fixtop к шапке
function addFixtopClass() {
var header = document.getElementById(headerId);
if (header) {
header.classList.add('fixtop');
}
}
// Функция для обработки скролла
function handleScroll() {
var header = document.getElementById(headerId);
if (header) {
var scrollDistance = window.scrollY;
if (scrollDistance <= scrollThreshold) {
header.classList.remove('menuscroll');
} else {
header.classList.add('menuscroll');
}
}
}
// Основная функция
function initHeaderScroll() {
addStyles();
addFixtopClass();
window.addEventListener('scroll', handleScroll);
}
// Запуск скрипта
initHeaderScroll();
</script>
Настройка параметров
- В начале кода найдите раздел НАСТРОЙКИ.
- Замените значение
headerIdна ID вашего Zero block. - При необходимости измените
scrolledBackgroundиscrollThreshold.
Изменение цвета и фона шапки в стандартном блоке ME301
Подготовка шапки
- Добавьте на страницу стандартный блок ME301.
- В настройках блока выберите «Фон меню».
- Удалите полностью фон.
- Установите «Непрозрачность фона меню» на «По умолчанию».
- Скопируйте ID вашего блока ME301.
Добавление кода
- Добавьте на страницу блок T123.
- Вставьте в него следующий JavaScript код:
<script>
// ======= НАСТРОЙКИ (ИЗМЕНИТЕ ИХ ПО ВАШЕМУ ЖЕЛАНИЮ) =======
// ID вашего блока шапки ME301
var headerId = 'rec000000000';
// Цвет или фоновое изображение шапки ДО скролла
var initialBackground = 'white';
// Пример для цвета: 'white' или '#ffffff'
// Пример для изображения: 'url(https://example.com/image.jpg)'
// Цвет или фоновое изображение шапки ПОСЛЕ скролла
var scrolledBackground = '#303030';
// Пример для цвета: 'black' или '#000000'
// Пример для изображения: 'url(https://example.com/another-image.jpg)'
// Расстояние скролла (в пикселях), после которого меняется фон шапки
var scrollThreshold = 130;
// ======= КОНЕЦ НАСТРОЕК =======
// Функция для создания и добавления стилей
function addStyles() {
var style = document.createElement('style');
style.textContent = `
.t228, .tmenu-mobile {
transition: 0.2s ease-out;
}
.t228__beforescroll, .tmenu-mobile__beforescroll {
background: ${initialBackground} !important;
}
.t228__afterscroll, .tmenu-mobile__afterscroll {
background: ${scrolledBackground} !important;
}
@media screen and (max-width: 980px) {
.tmenu-mobile {
position: fixed;
top: 0;
right: 0;
left: 0;
}
}
`;
document.head.appendChild(style);
}
// Функция для добавления начального класса к шапке
function addInitialClass() {
var header = document.getElementById(headerId);
if (header) {
var t228 = header.querySelector('.t228');
var tmenuMobile = header.querySelector('.tmenu-mobile');
if (t228) {
t228.classList.add('t228__beforescroll');
}
if (tmenuMobile) {
tmenuMobile.classList.add('tmenu-mobile__beforescroll');
}
}
}
// Функция для обработки скролла
function handleScroll() {
var header = document.getElementById(headerId);
if (header) {
var t228 = header.querySelector('.t228');
var tmenuMobile = header.querySelector('.tmenu-mobile');
var scrollDistance = window.scrollY;
if (scrollDistance <= scrollThreshold) {
if (t228) {
t228.classList.remove('t228__afterscroll');
t228.classList.add('t228__beforescroll');
}
if (tmenuMobile) {
tmenuMobile.classList.remove('tmenu-mobile__afterscroll');
tmenuMobile.classList.add('tmenu-mobile__beforescroll');
}
} else {
if (t228) {
t228.classList.remove('t228__beforescroll');
t228.classList.add('t228__afterscroll');
}
if (tmenuMobile) {
tmenuMobile.classList.remove('tmenu-mobile__beforescroll');
tmenuMobile.classList.add('tmenu-mobile__afterscroll');
}
}
}
}
// Основная функция
function initHeaderScroll() {
addStyles();
addInitialClass();
window.addEventListener('scroll', handleScroll);
}
// Запуск скрипта
initHeaderScroll();
</script>
Настройка параметров
- В начале кода найдите раздел НАСТРОЙКИ.
- Замените значение
headerIdна ID вашего блока ME301. - При необходимости измените
scrolledBackgroundиscrollThreshold.
Советы по настройке динамической шапки
- Выбирайте контрастные цвета для лучшей читаемости
- Экспериментируйте с прозрачностью фона
- Используйте плавные переходы для более приятного визуального эффекта
- Тестируйте на разных устройствах и браузерах, особенно на мобильных
Часто задаваемые вопросы
Можно ли использовать изображение вместо цвета фона?
Да, вы можете использовать URL изображения в параметрах initialBackground и scrolledBackground.
Как изменить скорость появления фона?
Отредактируйте значение transition в CSS-стилях кода.
Работает ли этот метод на мобильных устройствах?
Да, код адаптирован для работы на всех устройствах, включая мобильные.
Заключение
Теперь вы знаете, как сделать, чтобы при скролле header менял цвет и фон в Тильде, учитывая особенности мобильной версии. Эта функция поможет сделать ваш сайт более динамичным и привлекательным для посетителей на всех устройствах. Не забудьте протестировать работу шапки на разных экранах и браузерах, чтобы убедиться в корректной работе скрипта.
Экспериментируйте с цветами, изображениями и настройками, чтобы найти оптимальное решение для вашего дизайна. Удачи в создании впечатляющих веб-проектов на Tilda!
