While the fixed and sticky position elements seems rather similar, the sticky element maintains its position only within its containing block. Sticky is relative, which allows all sorts of potential creativity.
Basic sticky positioning
A simple example of how the sticky position element works.
See the Pen Basic Sticky Positioning by Tipue () on CodePen.
sticky in the
position property tells the sticky div to stick within the box div, positioned by the
top property. The
-webkit-sticky value is a required prefix for Safari.
A menu with sticky positioning
A popular use for sticky. You've seen it everywhere.
See the Pen Menu with Sticky Positioning by Tipue () on CodePen.
In the sticky div the
top property has a value of
A sideways sticky scroll
Sticky can also use horizontal values, such as
See the Pen A Sideways Scroll Sticky by Tipue () on CodePen.
This example also uses viewport width
and viewport height
values. For more on these units, see Using Vw and Vh
Parallax scrolling & sticky
An example of using sticky in an parallax scrolling design.
See the Pen Parallax Scrolling & Sticky by Tipue () on CodePen.
Along with sticky, this also uses the
background: no-repeat fixed
method of fixing the block-2 div in place.
Position: sticky works with Edge 16+, Chrome 56+, Firefox 59+, Opera 42+, Android Browser 67+, Chrome for Android 70+ and Firefox for Android 63+. Safari 6.1+ and iOS Safari 6+ are supported but require the
-webkit-sticky prefix value.