Что такое sticky позиционирование

Sticky позиционирование — это гибрид relative и fixed. Элемент ведёт себя как relative до пересечения определённого порога (например, скролла), после чего фиксируется (fixed) относительно ближайшего родителя с прокруткой.

Пример:

.sticky-element {
  position: sticky;
  top: 20px; /* Фиксируется при достижении этой точки */
}

Особенности:

• Работает только с указанием top, bottom, left или right
• Не вырывает элемент из потока (в отличие от fixed)
• Фиксация действует только в пределах родительского контейнера
• Поддержка браузерами: все современные, кроме IE11.

Часто используется для закрепления заголовков таблиц или навигации при скролле.