Как сделать sticky элемент

Чтобы сделать элемент sticky, используйте CSS-свойство position: sticky вместе с указанием точки "прилипания" (например, top: 0). Элемент будет вести себя как relative, пока не достигнет заданной позиции, после чего "прилипнет".

.sticky-element {
  position: sticky;
  top: 0; /* Прилипает к верху viewport */
  background: white;
  z-index: 100; /* Чтобы элемент был поверх других */
}

Важные нюансы:

1. Родительский контейнер не должен иметь overflow: hidden
2. Работает только внутри родительского блока (перестанет быть sticky при прокрутке за его пределы)
3. Для горизонтального sticky используйте left или right
4. Не забывайте про z-index, если есть перекрывающиеся элементы