Web5X - Готовые сайты

Блог о создании сайта, конструкторе сайтов и Elementor

Эффект прилипания.

Эффект прилипания (фиксации) используется почти на каждом сайте, начиная от простой визитки до интернет магазина. Наверняка вы замечали, когда прокручиваем сайт вниз, то в какой то момент шапка (или меню) прилипает к верхней части сайта и больше не двигается. В тот момент когда мы возвращаемся в верх сайта, данный элемент как бы отлипает и возвращается на место. Давайте посмотрим как воспользоваться данной возможностью.

Предположим, что у нас есть сайт с верхним меню и нам нужно его зафиксировать при прокрутки. Для этого переходим в редактирование виджета или секции и на вкладке Расширенные выбираем группу настроек Scrolling Effect (Эффект прокрутки). Далее в пункте "Прилипать" выбираем позицию Вверх. Теперь при прокрутки, меню будет оставаться вверху сайта.

рис.1

Другая ситуация, когда есть какой то контент на сайте, например информация о доставке и банер справа (рис. 1), который нам нужно зафиксировать при прокрутки определенного длинного контента слева, но при этом при достижении другого контента снизу, прилипание прекращалось. И вот это тоже сделать легко, достаточно для нужного элемента (в нашем случаи изображение) все в тех же настройках просто выбрать опцию "Оставаться в колонке".

Данная опция фиксирует элемент в колонке секции до тех пор пока не достигнет другого края колонки. (рис.3) Т.е в нашем случаи как только прилипший элемент достиг нижнего края секции, то он уже ведет себя не как прилипший элемент (прокручиваемый), а как обычный элемент размещенный в секции.

рис.3

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

Эффект прилипания.: 2 комментария

    1. Здравствуйте. Все показано и описано выше. Я не понял, что вы именно не поняли 🙂

Добавить комментарий для Катя Отменить ответ

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

Блог о создании сайта, конструкторе сайтов и Elementor.
Авторские права © 2018 . Все права защищены.
Готовые сайты на web5x.ru
Политика конфиденциальности