Элемент ведет себя как фиксированная позиция, но удаляет его из потока документов? ⇐ Html

[Anonymous]

Мне это показалось довольно простым, но я не могу заставить его работать и не нашел реального решения в Интернете. У меня есть страница с заголовком, некоторым содержимым и прикрепленной панелью навигации, которая отображается в виде (свернутого) меню гамбургера на небольших окнах просмотра.
По сути, я хочу, чтобы заголовок исчезал при прокрутке страницы вниз, а липкая панель навигации/меню гамбургера прокручивалась вверх под заголовком, а затем оставалась в верхней части страницы. Бургер-меню перемещается вправо (я сделал это с помощью flexbox, max-content и Margin-left:auto).
Теперь я хотел бы убрать липкое бургер-меню из потока документа, чтобы оно перекрывало раздел содержимого. Это то, что я не могу заставить себя работать. Я не хочу использовать позицию:fixed, так как меню гамбургера всегда должно оставаться под заголовком, и я не могу использовать позицию:абсолютную, так как раздел контента довольно длинный.
Я пробовал использовать float:right, но тогда раздел содержимого и меню гамбургера вообще не перекрываются. Я не могу разместить .sticky-navigation внутри .div.content, так как в разделе содержимого используется display:grid, а панель навигации сворачивается в меню гамбургера до того, как сетка выравнивается в один столбец с меньшей точкой останова (поскольку меню бургера тогда будет занимать элемент сетки, верно?).
Я совершенно не понимаю, как этого добиться. Я бы не хотел использовать для этого Javascript, поскольку это должно быть возможно только с помощью CSS? Кроме того, меня беспокоит снижение производительности, особенно на мобильных устройствах. Есть ли у кого-нибудь идеи, как туда добраться?
Вот мой код: https://codepen.io/alessandrov/pen/JjmaEgr

Код: Выделить всё

header {
padding: 1rem;
background: red;
}

.sticky-navigation {
padding: 0.5rem;
background: blue;
position: sticky;
display: flex;
align-items: flex-end;
justify-content: flex-end;
max-width: 8rem;
margin-left: auto;
top: 1rem;
}

.content {
background: green;
padding: 1rem;
padding-bottom: 15rem;
}

h1 {
margin-bottom: 3rem;
}

Код: Выделить всё

This is the header.


This is where the burger menu would go

Big title
This is where all of the content would go. Repeated to simulate my page. This is where all of the content would go. Repeated to simulate my page. This is where all of the content would go. Repeated to simulate my page.

Подробнее здесь: https://stackoverflow.com/questions/762 ... ument-flow