Position Sticky in CSS
position: sticky is a positioning property in CSS, which makes an element behave like
position: fixed when the page is scrolled to a certain position, and behave like
position: relative at other positions. Specifically, the element will “stick” at the set position until the edge of its parent container reaches the corresponding edge of the “sticky” element.
The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.
This value always creates a new stacking context. Note that a sticky element “sticks” to its nearest ancestor that has a “scrolling mechanism” (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn’t the nearest actually scrolling ancestor.
position: sticky elements do not actually become
position: relative. Instead, when it’s not “sticky” (i.e. when it doesn’t need to stick to the screen), it behaves like
position: relative, which means it will layout according to the normal document flow, but its
position property does not actually change.
Here are a few situations that cause a
position: sticky element to behave like a
Scroll position is not within the threshold: When the page does not scroll to the position specified by the
rightand other sticky boundaries of the element, the element looks just like a
Bounds of parent element: When the bottom of a
position: stickyelement reaches the bottom of its parent container, it will stop sticky behavior as if it were
Compatibility and Limitations: If the parent element has an
overflowattribute with a value other than
visible, or any ancestor element of the
position: stickyelement has a
will-changeattribute, or any ancestor element of the
position: stickyelement is not
position: static(such as
position: absolute, or
position: fixed) , then
position: stickymay not work and the element will behave like
No threshold specified: If at least one attribute value among
rightis not specified for the
position: stickyelement, it will not have sticky behavior.
Note that even in these cases, the element’s
position property is
sticky, but its behavior looks similar to
relative. This is because it is not fixed in the viewport but continues to scroll with the contents of the scroll container.
Take Apple’s Product detail’s page for example: https://www.apple.com/shop/buy-iphone/iphone-15-pro
The frame of this page looks like this: ⬇️
As we scroll down the page, the red block (I set position:sticky) starts to stick to the screen when the scroll position reaches the top threshold (Situation 1). As we continue to scroll down, when our scroll position reaches the bottom of the red block parent element, it’ll stops sticking (Situation 2).
Source code can be viewed in Here
Check out the Compatibility in https://caniuse.com/css-sticky
Position Sticky in CSS