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

menu fixed color

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

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

Я буду использовать 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-индекс

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

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

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

Добавьте CSS

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

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

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

Все готово, можно без труда проверить.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *