Как сделать прикрепленный сайдбар на чистом CSS: простое руководство

Если вы когда-либо посещали сайт, где боковой элемент «прилипает» к экрану и следует за вами при прокрутке, вы уже знакомы с эффектом прикрепленного сайдбара. Раньше для реализации этого эффекта приходилось использовать JavaScript, чтобы отслеживать прокрутку и менять положение сайдбара. Этот метод был сложен в обслуживании и часто снижал производительность страницы. В этой статье расскажу, как сделать прикрепленный сайдбар на чистом CSS.

Теперь, благодаря CSS-свойству position: sticky, можно создать прикрепленный сайдбар всего с помощью двух строк кода. В этой статье мы расскажем, как это сделать.

Создание структуры страницы

Для начала создадим две основные области: главную область контента и сайдбар. Вот HTML-код, который нам потребуется:

<div class="wrapper">
  <div class="main">
    Главный контент
  </div>
  <div class="sidebar">
    Прикрепленный сайдбар
  </div>
</div>

Теперь мы разместим эти два блока рядом друг с другом с помощью Flexbox, что обеспечит нам адаптивность и упрощенное управление элементами.

Стили для макета

Применим базовые CSS-стили к нашей разметке:

.wrapper {
  display: flex;
  justify-content: space-between;
}

.main, .sidebar {
  border: 3px solid black;
  padding: 15px;
  background-color: #fff;
}

.main {
  width: 60%;
  height: 160vh; /* Высота больше экрана для демонстрации прокрутки */
}

.sidebar {
  width: 25%;
  height: 25vh;
}

body {
  background-color: #ccc;
  font-family: sans-serif;
  padding: 10px;
}

Здесь main и sidebar заданы в процентах для удобного распределения ширины. Использование 160vh в блоке main позволяет ему быть длиннее экрана, чтобы вы могли видеть эффект при прокрутке. Если ваш блок уже имеет много контента, статическую высоту убирайте.

Делаем сайдбар прикрепленным

Чтобы наш сайдбар стал «липким», достаточно добавить две строки к CSS:

.sidebar {
  position: -webkit-sticky; /* Для поддержки Safari */
  position: sticky;
  top: 0;
}

Теперь, при прокрутке страницы, сайдбар будет оставаться в верхней части экрана и следовать за пользователем.

Как это работает?

Свойство position: sticky фиксирует элемент на заданной позиции, когда он пересекает порог (в данном случае — верх страницы). Мы установили top: 0, что означает, что сайдбар будет прилипать к верхней части экрана. Это значение можно изменить, чтобы задать отступ сверху или, например, зафиксировать сайдбар в другой позиции.

Демо исходник реализации прикрепленного сайдбара

Возможные проблемы

Часто, работая с различными CMS и натягивая дизайн макеты, оказывается что данное свойство не функционирует. Проблема заключается в том, что сторонний код, CSS код, блокирует работу position: sticky. Как правило на body или родительский контейнер отключен overflow. Добавьте этот код на body:

body {
    overflow: visible;
}

Заключение

Свойство position: sticky поддерживается большинством современных браузеров (96%), что позволяет использовать его без риска потери функциональности.

Автор: Александр Сокирка

Занимаюсь веб разработкой с 2007 года. Имею большой опыт в веб-дизайне и разработке сайтов. Являюсь автором YouTube канала Быть Программистом. Основатель бренда Aletheme и автор тем для WordPress на маркетплэйсе Envato. С 2017 года занимаюсь обучением людей желающим стать программистами. Мои обучающие программы можно найти на этом сайте или на Udemy.