Как сделать липкий элемент относительно тела, не перемещая его за пределы родительского контейнера? ⇐ CSS

[Anonymous]

У меня есть макет, в котором для одного из гибких элементов внутри гибкого контейнера установлено положение: липкий. Он работает, как и ожидалось, внутри родительского контейнера, но я хочу, чтобы он вел себя как липкий относительно тела, не перемещая его за пределы родительского контейнера. Вот мой текущий код:

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

mini non-stick header

No sticky
sticky container


Lorem Ipsum is simply dummy text of the printing and typesetting industry...

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

body {
font-family: sans-serif;
text-align: center;
}

.non-stick-header {
padding: 10px;
background: grey;
}

.no-sticky {
background: green;
padding: 10px;
}

.sticky {
position: sticky;
top: 0;
background: red;
padding: 10px;
}

.scroll-content {
height: 1000px;
}

.flex-container {
display: flex;
flex-direction: column-reverse;;
}

В настоящее время элемент .sticky остается прикрепленным только внутри своего родительского .flex-контейнера. Как я могу сделать его липким относительно тела, сохраняя при этом внутри гибкого контейнера в структуре HTML?
к сожалению, мне нужно сохранить гибкий контейнер для переключения направлений элементов в зависимости от условия
p>
Спасибо за любые предложения!
https://jsfiddle.net/4rbkh6z0/

Подробнее здесь: https://stackoverflow.com/questions/792 ... e-parent-c