Главная » Программирование » Плавающий блок на CSS при прокрутке

Плавающий блок на CSS при прокрутке

Задача. Необходимо настроить на сайте сайдбар так чтобы он прилипал при прокрутке страницы. Называют это ещё как «плавающий блок».

Решение. Реализуется плавающий блок с помощью CSS-свойства position: sticky и top: 0 (вместо top могут быть и bottom, left, right с различными значениями) как в Код №1. Значение свойства top — это некий порог после которого блок начнет прилипать и двигаться в месте с прокруткой до того момента который позволяет ему двигаться родительский блок.

Код №1: Прилипающий (плавающий) блок на CSS.

Стоит обратить внимание на некоторые важные моменты, которые если не учитывать то можно не получить нужного результата:

  • Родительский элемент прилипающего элемента должен быть по высоте больше чем сам прилипающий элемент, т.к. элемент с position: sticky двигается в пределах родителя. И если родитель будет такой же по высоте, то и двигаться плавающему блоку будет некуда.
  • Родительский блок прилипающего блока не должен иметь свойство со значениями overflow: hidden (scroll, auto). Если есть такие, то нужно заменить на overflow: visible, иначе будут проблемы.
  • Найти родителей прилипающего элемента со свойством overflow не visible может помочть скрипт jQuery из Кода №2, где нужно только заменить селектор #my-sticky-element на свой. Скрипт вводится в консоли браузера (F12). Результат работы скрипта в Изображении 1. Можно раскрыть элемент в консоли и перейти к нему.
Код №2: Скрипт показывает родителей указанного элемента и значение их свойства overflow
Изображение 1: Результат работы Кода №2.

Примеры решений прилипающего блока на CSS

See the Pen
Responsive sticky sidebar
by Ryan Hoover (@ryanshoover)
on CodePen.

Пример №1: Прилипающий сайдбар на CSS

See the Pen
Sticky sidebar CSS Grid
by Oliver Phillips (@oliverjam)
on CodePen.

Пример №2: Прилипающий сайдбар на CSS
0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии