Как зафиксировать элемент вверху "контейнера" при скролле

Для фиксации элемента вверху контейнера при скролле используйте CSS-свойство position: sticky. Укажите top: 0, чтобы элемент прилипал к верхней границе контейнера.

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

Важно:

• Родительский контейнер должен быть выше viewport (иначе sticky не сработает)
• Для старых браузеров может потребоваться префикс -webkit-sticky
• Убедитесь, что нет overflow: hidden у родительских элементов