Плавающий блок на 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 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии