Внимание! Сайт переехал на новый домен sayt-sozdat.ru. Пожалуйста, обновите страницы закладок с новыми URL
×
Закрытие
4
×

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

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

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

Устанавливаем графический редактор GIMP

  1. Выбор графического редактора
  2. Устанавливаем программу GIMP
  3. Устанавливаем Руководство пользователя

Здравствуйте уважаемый посетитель!

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

В статье Устанавливаем бесплатный графический редактор GIMP речь пойдет о бесплатной программе GIMP, которая позволяет в полной мере решать вопросы по созданию элементов дизайна веб-страниц. И будет показано, как ее установить на локальный компьютер.

Кроме того здесь можно будет посмотреть, как в этот редактор добавить встроенное "Руководство пользователя", а также приведен бесплатный видеокурс, где можно поближе с ним познакомиться.

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

Cайт на практическом примере

Текущее состояние создаваемого сайта

Здесь можно посмотреть текущее состояние сайта, создаваемого в рамках цикла статей Самописный сайт с нуля своими руками.

Исходные файлы данного сайта можно скачать из прилагаемых к статьям дополнительных материалов.

Вы здесь: Главная → Сборник статей → Плавающий сайдбар → Плавающий сайдбар на sticky-css


Автор: / Дата:

Плавающий сайдбар на sticky-css
play

Плавающий сайдбар на sticky-css

Здравствуйте, уважаемый посетитель!

К сожалению, у меня получился достаточно большой перерыв в размещении новых статей. А причина здесь вполне прозаическая, так как мне пришлось непосредственно поучаствовать в пандемии и на себе испытать, что это такое 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-кода такой страницы.

plavayushchij-sajdbar-na-sticky-css_1

Рис.1 HTML-страница с плавающим сайдбаром с использованием sticky

Можно заметить, что здесь содержимое основного содержания в элементе <main>(поз.35÷55) имеет такой объемом строк, при котором у родительского контейнера <div> (поз.34÷69) будет заведомо больший размер по высоте, чем элемент сайдбара <aside> (поз.56÷67) с назначенным свойством sticky. Что является обязательным условием для отработки липкого позиционирования.

Что касается стилей CSS, то для удобства копирования при тестировании данного варианта, здесь используется внутренняя таблица стилей CSS, расположенная в заголовке <head> веб-страницы (поз.7÷24).

При этом следует обратить внимание, что с помощью медиа-запроса (поз.20÷23) позиционирование sticky (поз.22) включается при разрешении экрана только более 700px. Так как при меньших величинах страница будет принимать одно колоночный вид. И применять в этом режиме эффект плавающего сайдбара не имеет никакого смысла.

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

Рис.2 Демонстрация плавающего сайдбара с использованием sticky

Если прокрутить вниз, то можно увидеть, что сайдар, достигнув определенного порога прилипает к верней области экрана (окна фрейма). В этом случае позиционирование блока <aside>, в котором расположен сайдбар (рис.1, поз.55÷62), из относительного relative переходит в фиксированное fixed.

А далее, после того, как <aside> достигнет такого положения, при котором нижняя его часть будет совмещена с нижней границей родительского контейнера <div> (рис.1, поз.33÷64), при дальнейшей прокрутке он синхронно с родителем выталкивается наверх.

При обратной прокрутке сайдбар будет перемещаться синхронно с родительским блоком до тех пор, пока нижняя его часть не оторвется от нижней границы родителя. После чего он зафиксируется в верхней части экрана посредством фиксированного позиционирования fixed блока <aside>.

А после того, как верхняя часть сайдбара достигнет верхней границы родителя, блок <aside> примет относительное позиционирование relative и встанет на свое место в основном потоке.

При необходимости, проверить работу данного варианта можно самостоятельно, скачав здесь исходный HTML-код страницы, приведеннsй на рис.1.

Реализация плавающего сайдбара на тестовом сайте


В предыдущем разделе мы рассмотрели работу плавающего сайдбара, построенного с использованием sticky-css, на примере специально созданной демонстрационной страницы. Что позволяет более подробно ознакомиться с особенностями этого варианта.

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

Рис.3 Демонстрация плавающего сайдбара на тестовом сайте с использованием sticky

Развернуть
×

Кроме того работу плавающего сайдбара можно посмотреть и непосредственно на размещенном в сети Интернет ресурсе любым из следующих способов:

  • с использованием встроенного фрейма,
  • на реальном ресурсе, размещенном на выделенном домене avtobezugona.ru.

    скриншот 51

Ну, а последнюю версию тестового сайта с внесенными дополнениями по реализации плавающего сайбара с использованием sticky-css, можно скачать, как обычно, по ссылкам в конце статьи.


В завершении можно добавить, что в следующей статье мы рассмотрим также плавающий сайдбар, но в этом случае он будет построен иначе - с использованием JavaScript.

Исходные файлы сайта


Знак папкиИсходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать из прилагаемых дополнительных материалов:

  • Файлы каталога www
  • Таблицы базы данных MySQL

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

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

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

С уважением, Николай Гришин

Комментарии


Если у Вас возникли вопросы, или есть какие-либо пожелания по представлению материала, либо заметили какие-нибудь ошибки, а быть может просто хотите выразить свое мнение, пожалуйста, оставьте свои комментарии. Такая обратная связь очень важна для возможности учета мнения посетителей.

Буду Вам за это очень признателен!