Здравствуйте, уважаемый посетитель!
К сожалению, у меня получился достаточно большой перерыв в размещении новых статей. А причина здесь вполне прозаическая, так как мне пришлось непосредственно поучаствовать в пандемии и на себе испытать, что это такое COVID-19.
И хочу сказать всем тем, кто не верит в реальность этой заразы, что данный вирус, действительно, необычный, вызывающий серьезные проблемы со здоровьем. По крайней мере никогда я еще так тяжело и долго не болел. И никому не желаю это испытать.
Ну а теперь все позади и можно наконец приступить к своим текущим делам. Сегодня рассмотрим плавающий сайдбар, построенный на чистом CSS с применением, так называемого "липкого позиционирования".
Как отмечалось ранее в анонсе раздела, особенностью данного способа, по сравнению JavaScript, является простота реализации при высоком быстродействии изменений положения сайдбара, вызванного прокруткой страницы пользователем.
Содержание
- Как работает липкое позиционирование
- Пример практического применения позиционирования sticky
- Реализация плавающего сайдбара на тестовом сайте
- Исходные файлы сайта
Как работает липкое позиционирование
Ранее для создания плавающего сайдбара обычно применялся клиентский JavaScript. Однако с внедрением нового стандарта CSS3 стало возможным получать подобный эффект, используя для этого всего лишь только свойства CSS. А именно: добавленное в новый стандарт, так называемое "липкое позиционирование" (position:sticky).
В настоящее время у этого позиционирования достаточно хорошая браузерная поддержка, что позволяет в полной мере использовать этот способ для создания на сайте плавающего сайдбара.
При этом, в отличие от традиционного использования JavaScript, такое решение достаточно просто реализуемо. В чем сейчас и убедимся.
Но прежде, чем приступить к практической реализации, сначала рассмотрим принцип действия липкого позиционирования и его особенности.
Итак, еще не так давно существовало всего четыре вида позиционирования: static (статическое) и relative (относительное), сохраняющие своё естественное положение элементов в потоке документа, а также absolute (абсолютное) и fixed (фиксированное), при которых элементы "выпадают" из основного потока и смещаются относительно своего местоположения в зависимости от вида позиционирования и заданных свойств.
Например при absolute позиционировании элементы размещаются относительно ближайшего родительского контейнера, у которого свойство position имеет значение absolute, fixed или relative. А с fixed - элементы будут располагаться на странице относительно окна браузера.
Что касается статического и относительного позиционирования, то их отличие заключается только лишь в том, что при relative возможно применение таких свойств, как top, bottom, left или right. Что позволяет смещать такие элементы относительно своего местоположения, оставляя пустое пространство там, где они должны были быть расположены изначально. В случае же со static, CSS свойств top, bottom, left или right к заданным элементам будут игнорироваться.
Новый же, добавленный в CSS3 стандарт липкого позиционирования sticky, по существу, является гибридом относительного и фиксированного.
В данном случае, пока элемент занимает в исходном состоянии занимает свое местоположение, к нему должно применяться относительное позиционирование. Как только он достигает определенный порог, он должен будет рассматриваться как фиксированный.
При этом важно отметить, что элемент фиксируется только в рамках ближайшего родителя, когда расстояние до границы ближайшего прокручиваемого родительского контейнера достигает указанного в свойствах top, bottom, left или right значения.
Таким образом, для вертикальной прокрутки элемента следует указывать только top и bottom. Для горизонтальной же - left и right.
Кроме того, обязательным условием является то, что высота (при вертикальной прокрутке) и ширина (при горизонтальной прокрутке) родительского контейнера должна быть больше размера элемента, к которому применяется липкое позиционирование.
Так как в противном случае, если родительский элемент будет являться лишь обверткой для элемента с sticky с теми же самыми размерами, то никакое прилипание работать не будет.
Вот, в принципе, и все особенности работы липкого позиционирования. Осталось только проверить это на практике.
Пример практического применения позиционирования sticky
Для того, чтобы посмотреть как это работает, создадим отдельную тестовую страницу, представляющую собой каркас из следующих блоков:
- Шапка (header)
- Меню (menu)
- Область основного содержания (main)
- Сайдбар (aside)
- Подвал (footer)
При этом наполним область основного содержания и сайдбар содержимым в необходимом для прокрутки страницы объемом. Ниже представлен вариант HTML-кода такой страницы.
Рис.1 HTML-страница с плавающим сайдбаром с использованием sticky
Можно заметить, что здесь содержимое основного содержания в элементе (поз.35÷55) имеет такой объемом строк, при котором у родительского контейнера Что касается стилей CSS, то для удобства копирования при тестировании данного варианта, здесь используется внутренняя таблица стилей CSS, расположенная в заголовке веб-страницы (поз.7÷24). При этом следует обратить внимание, что с помощью медиа-запроса (поз.20÷23) позиционирование sticky (поз.22) включается при разрешении экрана только более 700px. Так как при меньших величинах страница будет принимать одно колоночный вид. И применять в этом режиме эффект плавающего сайдбара не имеет никакого смысла. Как будет выглядеть данная страница в двух колоночном виде можно посмотреть вживую, прокрутив ее на следующей вкладке, на которой она отображается с использованием встроенного фрейма. Рис.2 Демонстрация плавающего сайдбара с использованием sticky Если прокрутить вниз, то можно увидеть, что сайдар, достигнув определенного порога прилипает к верней области экрана (окна фрейма). В этом случае позиционирование блока , в котором расположен сайдбар (рис.1, поз.55÷62), из относительного relative переходит в фиксированное fixed. А далее, после того, как достигнет такого положения, при котором нижняя его часть будет совмещена с нижней границей родительского контейнера При обратной прокрутке сайдбар будет перемещаться синхронно с родительским блоком до тех пор, пока нижняя его часть не оторвется от нижней границы родителя. После чего он зафиксируется в верхней части экрана посредством фиксированного позиционирования fixed блока . А после того, как верхняя часть сайдбара достигнет верхней границы родителя, блок примет относительное позиционирование relative и встанет на свое место в основном потоке. При необходимости, проверить работу данного варианта можно самостоятельно, скачав здесь исходный HTML-код страницы, приведеннsй на рис.1. В предыдущем разделе мы рассмотрели работу плавающего сайдбара, построенного с использованием sticky-css, на примере специально созданной демонстрационной страницы. Что позволяет более подробно ознакомиться с особенностями этого варианта. А как это выглядит в реальных условиях, можно посмотреть на следующем скриншоте рассматриваемого здесь тестового сайта, в который внесены все необходимые для этого преобразования. Рис.3 Демонстрация плавающего сайдбара на тестовом сайте с использованием sticky Кроме того работу плавающего сайдбара можно посмотреть и непосредственно на размещенном в сети Интернет ресурсе любым из следующих способов: скриншот 51 Ну, а последнюю версию тестового сайта с внесенными дополнениями по реализации плавающего сайбара с использованием sticky-css, можно скачать, как обычно, по ссылкам в конце статьи. В завершении можно добавить, что в следующей статье мы рассмотрим также плавающий сайдбар, но в этом случае он будет построен иначе - с использованием JavaScript. Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям. Для скачивания исходных файлов необходимо авторизоваться под своим аккаунтом через соответствующую форму. Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация. С уважением, Реализация плавающего сайдбара на тестовом сайте
Исходные файлы сайта
Исходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать из прилагаемых дополнительных материалов: