»  Elementor  »  Как менять цвет липкого хедера при прокручивании

Как менять цвет липкого хедера при прокручивании

Последнее обновление:

Как менять цвет липкого хедера при прокручиванииВ предыдущей статье инструкция как сделать липкий хедер.

В этой статье вы узнаете, как сделать липкий хедер, который меняет цвет или прозрачность при прокручивании.

Вы можете использовать любой пейдж-билдер или конструктор на основе Гутенберг, в котором есть весь функционал из этой статьи.

Я буду использовать Elementor Pro.

1. Создайте HERO секцию

Добавьте первую секцию, в которой находится изображение, ваше уникальное предложение, призыв к действию и так далее.

Хедер

2. Создайте еще одну секцию для хедера

Добавьте еще одну секцию выше HERO секции или создайте отдельный шаблон для хедера. В этой секции будет находиться липкий прозрачный хедер.

Установите значение ширины макета, или дайте этой секции полную ширину.

Elementor - Секция - Макет - Ширина макета
Секция — Макет — Ширина макета

а. Создайте хедер внутри этой секции

Назначьте класс stickyheadersection этой секции. Если нужно, добавьте отступы.

Elementor - Секция - Расширенные - CSS Классы
Секция — Расширенные — CSS Классы

б. Включите прилипание

Добавьте прилипание в настройках. Эта функция находится в Elementor Pro. Если у вас нет Pro, вы можете использовать бесплатный плагин Jet Sticky.

Elementor - Секция - Расширенные - Эффекты движения
Секция — Расширенные — Эффекты движения

в. Добавьте z-index

Дайте секции z-index 999 и добавьте отрицательный отступ, чтобы поместить секцию выше первой секции.

Elementor - Секция - Расширенные - Отступы, z-index
Секция — Расширенные — Отступы, Z-индекс

Вместо значения -60 добавьте свое значение, которое равно высоте хедера.

г. Добавьте Смещение эффектов

Подберите нужное значение для Смещения эффектов. Это значение определяет, через сколько пикселей секция изменит цвет, который вы укажете в коде из следующего абзаца.

Elementor - Секция - Эффекты движения - Смещение эффектов
Секция — Эффекты движения — Смещение эффектов

Добавьте CSS

Добавьте этот CSS снипет на страницу, где вы хотите иметь липкий хедер, или в сам шаблон хедера. Это можно сделать с помощью виджета HTML-код.

Если будете делать с помощью виджета HTML-код, не забудьте поставить теги <style></style>.

Замените цвет фона хедера на свой в строке 6. Когда вы будете прокручивать страницу вниз, хедер будет менять цвет на этот.

Вы можете использовать этот способ не только в Элементоре, но и в любом другом пейдж-билдере.

Все готово, можно проверить.

Читайте также:

  1. Липкое меню WordPress с помощью Elementor
  2. Как добавить текст на картинке при наведении мышкой

Надеюсь, статья была полезна. Оставляйте комментарии.

Оставьте комментарий

Do NOT follow this link or you will be banned from the site!