Стек липких заголовков

Заголовок секции липнет к верху, следующий наезжает и сменяет его. Ноль JS.

Скрольте вниз.

Дизайн

Заголовок этой секции прилип к верху. Скрольте — следующий наедет и заменит его. Текст-заглушка для высоты.

Разработка

Каждый заголовок — position: sticky; top: 0. Стек работает сам, без JS. Ещё немного текста для прокрутки.

Запуск

Классика редакционных лонгридов и меню ресторанов на dribbble.

Код

<section>
  <h2 class="stick-h">Дизайн</h2>
  <p>контент…</p>
</section>
<section>
  <h2 class="stick-h">Разработка</h2>
  <p>контент…</p>
</section>

<style>
.stick-h { position: sticky; top: 0; z-index: 2;
  background: #fff;                    /* фон обязателен */
  padding: 22px; margin: 0; }
/* каждый следующий заголовок наезжает на предыдущий
   и «сменяет» его — стек из чистого CSS */
</style>

Промпт для ИИ

Сделай стек липких заголовков: заголовок каждой секции position:sticky; top:0 с непрозрачным фоном и z-index. Пока секция скроллится — её заголовок стоит приклеенным сверху; заголовок следующей секции наезжает и сменяет его. Чистый CSS без JS. Дай секциям много нижнего паддинга, чтобы смена читалась. Заголовкам можно разные фоны — смена станет заметнее.