Techbear
Сайт для тех, кто хочет использовать Вордпресс по максимуму, но не хочет разбираться в коде.
В предыдущей статье инструкция как сделать липкий хедер.
В этой статье вы узнаете, как сделать липкий хедер, который меняет цвет или прозрачность при прокручивании.
Вы можете использовать любой пейдж-билдер или конструктор юлоков Гутенберг, в котором есть функционал из этой статьи.
Я буду использовать Elementor Pro.
Добавьте первую секцию, в которой находится изображение, ваше уникальное предложение, призыв к действию и так далее.
Добавьте еще одну секцию выше HERO секции или создайте отдельный шаблон для хедера. В этой секции будет находиться липкий прозрачный хедер.
Установите значение ширины макета, или дайте этой секции полную ширину.
Назначьте класс stickyheadersection
этой секции. Если нужно, добавьте отступы.
Добавьте прилипание в настройках. Эта функция находится в Elementor Pro. Если у вас нет Pro, вы можете использовать бесплатный плагин Jet Sticky.
Дайте секции z-index 999
и добавьте отрицательный отступ, чтобы поместить секцию выше первой секции.
Вместо значения -60
добавьте свое значение, которое равно высоте хедера.
Подберите нужное значение для Смещения эффектов. Это значение определяет, через сколько пикселей секция изменит цвет, который вы укажете в коде из следующего абзаца.
Реклама
Простой способ выгодно купить полис
Добавьте этот CSS снипет на страницу, где вы хотите иметь липкий хедер, или в сам шаблон хедера. Это можно сделать с помощью виджета HTML-код.
Если будете делать с помощью виджета HTML-код, не забудьте поставить теги <style></style>
.
Замените цвет фона хедера на свой в строке 6
. Когда вы будете прокручивать страницу вниз, хедер будет менять цвет на этот.
Вы можете использовать этот способ не только в Элементоре, но и в любом другом пейдж-билдере.
Все готово, можно проверить.
Читайте также:
Надеюсь, статья была полезна. Оставляйте комментарии.
Сайт для тех, кто хочет использовать Вордпресс по максимуму, но не хочет разбираться в коде.
Спасибоще большое!!! Давно искал как это сделать в Elementor!!! Все работает!