Как использовать CSS позицию sticky на вашем сайте

CSS position sticky - это свойство, которое позволяет зафиксировать элемент при прокручивании страницы до определенного момента, когда он достигает другого элемента или определенного расстояния от края экрана.

Рассмотрим пример:

HTML:

  
Заголовок
  
Содержание

CSS:

.container {
  height: 500px;
  overflow-y: scroll;
}
.header {
  position: sticky;
  top: 0;
  background-color: #ffffff;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.content {
  padding: 15px;
}

В данном примере мы создаем контейнер с фиксированной высотой и добавляем блок заголовка и блок содержания. У блока заголовка мы добавляем свойство position: sticky;, которое заставляет его оставаться на месте, когда мы прокручиваем страницу.

Добавляя top: 0, мы фиксируем его сверху, а далее мы задаем фоновый цвет, отступы и тень, чтобы придать их стиля.

В блоке содержания мы добавляем отступы, чтобы контент не налез на фиксированный блок заголовка.

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

Position sticky - это очень удобное свойство, которое позволяет создавать интерактивный и удобный интерфейс. Оно поддерживается во всех основных браузерах, кроме IE11 и старше версий Safari и Edge.