»  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. Как добавить текст на картинке при наведении мышкой

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

Один комментарий

Оставить ответ

Techbear