Playing with CSS sticky positioning

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.
CSS
HTML
Example

See the Pen Basic Sticky Positioning by Tipue () on CodePen.

The value 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.
CSS
HTML
Example

See the Pen Menu with Sticky Positioning by Tipue () on CodePen.

In the sticky div the top property has a value of 0.
A sideways sticky scroll
Sticky can also use horizontal values, such as left.
CSS
HTML
Example

See the Pen A Sideways Scroll Sticky by Tipue () on CodePen.

This example also uses viewport width vw and viewport height vh values. For more on these units, see Using Vw and Vh.
Parallax scrolling & sticky
An example of using sticky in an parallax scrolling design.
CSS
HTML
Example

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.