Придерживайте контейнер, пока дети не прокрутятся до конца ⇐ CSS

[Anonymous]

У меня позиция: липкая; top: стиль 80px на карточках, и над карточкой есть заголовок, объясняющий, для чего нужны эти карточки, и я хочу, чтобы заголовок отображался до тех пор, пока все прикрепленные карточки не будут прокручены до конца. Это означает, что я не хочу, чтобы заголовок карточек прокручивался вверх до того, как все карточки будут прокручены и просмотрены.
Демоверсия Code Pen
Я установил Position: Sticky в список карточек, который отображает и заголовок, и карточки, но не позволяет прокручивать карточки, так как мы вложили Position: Sticky< /p>
Фрагмент кода:

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

body {
font-family: system-ui;
background: #f06d06;
color: white;
text-align: center;
}

.header {
margin-bottom: 200px;
}

.footer {
margin-top: 200px;
margin-bottom: 200px;
}

.card {
height: 200px;
border: 1px solid black;
background: orange;
position: sticky;
top: 80px;
}

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.

Your security prioritized

Have peace of mind knowing your data is safe and not being fed into open AI models. Our
proprietary technology is secured and optimized for you.


Multi-Factor Authentication

We employ email validation after registration as well as MFA for all login attempts to protect
user accounts.

Absolute Privacy Assurance

Only you and your designated team members have direct access to your data, maintaining strict
confidentiality.

Protected Script Storage

We train our models via coveted, curated, and current data partnerships–your data stays
protected and private to you.



Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.

Подробнее здесь: https://stackoverflow.com/questions/788 ... to-the-end