Sticky

Definition

A hybrid between `relative` and `fixed` positioning. The element is treated as relative until it crosses a specified threshold during scrolling, at which point it becomes fixed.

Explain Like I'm New

The element acts like a normal, statically positioned element. But as you scroll down, right when it is about to go off the top of the screen, it magically sticks to the ceiling and follows you. When you scroll back up, it un-sticks and goes back to its original place.

Real World Example

Alphabetical contact lists in iOS. You scroll through the 'A' names, and the letter 'A' sticks to the top. When you hit the 'B' names, the 'B' header pushes the 'A' out of the way and sticks to the top.

Common Use Cases

•Table headers that follow you as you scroll
•Section headers

Interactive Example

Interview Questions

basic

What coordinate property MUST you provide for `sticky` to work?

intermediate

Why does `position: sticky` sometimes randomly fail to work?

Flash Cards

Question

Required property?

Click to reveal answer

Answer

You must provide at least one threshold, usually `top: 0;`. This tells the browser: 'Become sticky when the element is 0px away from the top of the screen'.

Question

Why does it fail?

Click to reveal answer

Answer

If ANY parent element in the HTML tree has `overflow: hidden`, `overflow: auto`, or `overflow: scroll`, `position: sticky` is completely disabled. The element will just scroll off the screen normally.