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

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

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

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

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

рис.1

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

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

рис.3

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

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

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

  1. Приветствую! Если нужна шапка сайта прозрачная и она на фоне слайдера, то возможно при прокрутке сделать ее с цветным фоном (без кода), чтоб ее надписи не на накладывались на текст ниже?

    1. День добрый. Нет. Без кода никак. Нужно написать CSS для стиля при прокрутке. Или как вариант при прокрутке, скрывать одно меню и показывать другое.

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

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

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