Делайте элемент липким до тех пор, пока не будет достигнута определенная оставшаяся высота контейнера. ⇐ CSS

[Anonymous]

Как можно определить, чтобы элемент вел себя как липкий элемент только в том случае, если оставшаяся высота элемента превышает определенный размер (который я буду называть липким полем контейнера)?
Например, на изображении ниже:


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

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

section {
height: 300lvh;
}

.content {
background: #eee;
height: 80lvh;
}

.box {
height: 120lvh;
background: #9f9;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.sticky {
position: sticky;
top: 0px;
height: 20lvh;
background: #99f;
}

.end {
color: red;
padding-top: 50px;
}

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

Prev content


Sticky element



When this is visible, the sticky element should go up

Подробнее здесь: https://stackoverflow.com/questions/792 ... ner-height