The bottom offset allows us
to control the element's position
from the bottom edge of the viewing
screen
or
the bottom edge of its container
element.
In this example, as we scroll
to the top,
the div elements with the
non-sticky-div
and
sticky-div id move towards
the bottom.
However, when the div with
the sticky-div id is at a
distance of 100px from the
bottom edge, it stops moving down,
unlike the div with the
non-sticky-div id.
This happens because the position: sticky
and
the bottom offset come into effect.
Try changing the bottom offset
value and observe the effect.