Como um elemento pode ser definido para se comportar como um elemento fixo somente quando a altura restante do elemento for maior que um tamanho específico (que chamarei de margem do contêiner fixo)?
Por exemplo, na imagem abaixo:
Você pode ver que o contêiner azul claro tem um elemento vermelho pegajoso, e a margem do contêiner pegajoso é mostrada como uma linha azul escura. Quando o elemento do contêiner está saindo da tela, o elemento vermelho permanece pegajoso até que a margem do contêiner pegajoso atinja o fim do contêiner.
Aqui está um código inicial para testar algumas soluções. Tentei fazer da linha azul um contêiner, mas isso bagunça a posição inicial do resto do conteúdo.
section {
height: 300lvh;
}
.content {
background: #eee;
height: 80lvh;
}
.box {
height: 120lvh;
background: #9f9;
display: flex;
flex-direction: column;
}
.sticky {
position: sticky;
top: 0px;
height: 20lvh;
background: #99f;
}
.end {
color: red;
padding-top: 50px;
}
.flex-end {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
}<section>
<div class="content">Prev content</div>
<div class="box">
<div class="sticky">
Sticky element
</div>
<div>
Content
</div>
<div class="flex-end">
Content
</div>
</div>
<div class="content end">
When this is visible, the sticky element should go up
</div>
</section>