Как сделать липкую шапку

Короткий ответ

Дайте шапке position: sticky и top: 0. Прокрутите блок ниже:

<style>
  .page { height: 160px; overflow: auto; border: 1px solid silver; }
  .page header { position: sticky; top: 0; padding: 8px 12px; background: navy; color: white; }
  .page p { margin: 12px; }
</style>
 
<div class="page">
  <header>My Site</header>
  <p>Line 1</p><p>Line 2</p><p>Line 3</p><p>Line 4</p><p>Line 5</p><p>Line 6</p>
</div>

На настоящей странице прокручивается всё окно, поэтому рамка с overflow: auto не нужна — достаточно двух свойств у header.

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

Липкий элемент ведёт себя как обычный, пока не дойдёт до края, заданного top. Затем он «прилипает» и держится там, пока виден его родитель. Шапке нужен непрозрачный фон, иначе текст будет просвечивать сквозь неё, а z-index поднимает её над карточками и картинками с позиционированием.

Чем отличается fixed

position: fixed тоже держит шапку на месте, но вынимает её из потока: содержимое заезжает под неё, и приходится добавлять отступ сверху. Sticky место в потоке сохраняет.

Частая ошибка

Sticky молча не работает, если у одного из предков стоит overflow: hidden или overflow: auto: элемент прилипает к этому предку, а не к окну. Ещё одна причина — забытый top: без него прилипать не к чему.