Эффект карты наложения на основе чистого CSS с закрепленной позицией, без JavaScript ⇐ CSS

[Anonymous]

Я работаю над разделом, где эти карты складываются друг в друга, проблема в том, что они делают это с помощью позиции: липкой, и когда эффект карт заканчивается, карты проходят через «липкий заголовок», и мне бы хотелось они уходят с экрана, как если бы карточки нажимали на «липкий заголовок», как обычное поведение.

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

section {
padding: 6rem 1.6rem;
max-width: 120rem;
display: flex;
flex-direction: column;
align-items: center;
margin: 0 auto;
text-align: center;
}

h2 {
font-size: 2.4rem;
}

h3 {
font-size: 2.4rem;
color: var(--white);
margin-bottom: 4rem;
max-width: 60rem;
}

.sticky-header {
position: sticky;
top: 3rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}

.process__container {
width: 100%;
max-width: 120rem;
display: flex;
flex-direction: column;
align-items: center;
}

.cards-container {
width: 100%;
max-width: 90rem;
}

.card {
position: sticky;
top: 16rem;
padding-top: calc(var(--index) * 2rem);
}

.card-body {
background-color: var(--card-bg-color);
border-radius: 50px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.5s;
}

.card:nth-child(1) .card-body { background-color: #52B2CF; }
.card:nth-child(2) .card-body { background-color: #E5A36F; }
.card:nth-child(3) .card-body { background-color: #9CADCE; }
.card:nth-child(4) .card-body { background-color: #D4AFB9; }

.empty-container{
width:100%;
background-color: red;
height: 1000px;
}

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

pill
This is a long title

[list]
[*]
card 1

[*]
card 2

[*]
card 3

[*]
card 4

[/list]

Я создал ссылку в codepen
https://codepen .io/regnas/pen/BaXMZZK
Спасибо, ребята
пример результата:


ОТВЕТ: https://codepen.io/ regnas/pen/MWNxYgG

Подробнее здесь: https://stackoverflow.com/questions/791 ... javascript