bidirectional "sticky" position (how it is working when "fixed")

Question

on the 1st picture when the scroll reaches the parent element the sticky element sticks on the bottom of the screen (as expected)
on the 2nd picture when the scroll centers the sticky element it does not stick anywhere
on the 3rd picture the when the scroll goes further the sticky element stick on the top of the screen (as expected)

Here is my question :

as far as I understand the sticky position switches to "position:fixed" when the sticky element reaches its position on the viewport
on the 2nd picture that is definitely not the case because the sticky element does not stick neither the top nor the bottom of the screen
why is that what the sticky element is doing on the 2nd picture exactly?

.parentSticky {
    width: 50%;
    height: 800px;
    border: solid black 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
}
.siblingSticky {
    width: 100%;
    height: 100px;
    background-color: orange;
    border: solid 10px red;
    display: inline-block;
    flex: 50 0 1px;
    box-sizing: border-box;
}
.Istick {
    flex-grow: 1;
    border: solid 10px green;
    box-sizing: border-box;
    position: sticky;
    bottom: 10px;
    top: 10px;
}

<!-- break tags illustrate the page's other contents (scrolling demo) -->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>



<div class="parentSticky">
    <div class="siblingSticky"> Element  </div>
    <div class="siblingSticky Istick" > "Sticky" element </div>
    <div class="siblingSticky"> Element </div>
</div>




<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Temani Afif · Accepted Answer · 2019-04-15T12:34:55.927

You forget an important part about sticky which is:

A stickily positioned element is an element whose computed position value is sticky. It's treated as relatively positioned until its containing block crosses a specified threshold ^ref

So in the second picture the sticky element is behaving as relative element.

To use simple words, the sticky element will behave as sticky only if it becomes hidden from the screen due to the scroll and in this case the sticky behavior will force is to remain visible. If it's already visible (like in your second picture), no need any sticky behavior and the element will behave as if it has position:relative set.

top/bottom are simply used to define the offsets.

bidirectional "sticky" position (how it is working when "fixed")

1 Answers1

Linked