Position sticky is one of those CSS things
that doesn't seem to work at all.
Until it works perfectly.
Fortunately, once you have the basics down,
it's pretty great.
So.
Let's cover this in context.
We'll set the position to sticky, and then
we'll set a defined distance.
Position sticky works like a relatively positioned
element.
It sits within the normal document flow.
Until...you hit a defined distance.
Which is nonsense talk for "a set value that
represents the space between the thing you're
making sticky...and the viewport itself."
When it hits that distance?
It behaves more like something with a fixed
position — positioned around the viewport
itself.
On our sidebar here, if we scroll up and down,
it's a normal sidebar.
It’s a div block with some stuff inside.
Nothing fancy.
But let's apply position sticky.
Scroll up and down?
Same thing.
Why?
Because we never defined a distance.
Which is why this script was printed, highlighted,
stamped, and glued to Stacy's computer.
All we have to do?
Define a distance.
0 pixels (we're setting 0 pixels from the
top).
Let's check that out.
Scroll down...and when it hits zero pixels
from the top?
It sticks.
Now let's try something else.
The space here (in our current design) is
about 30 pixels.
Actually, it's exactly 30 pixels.
So what happens if we set position sticky
to 30 pixels from the top?
Well, we can find out exactly what it looks
like.
And when we scroll up and down, it stops scrolling
when it hits 30 pixels from the top.
So.
Position sticky.
It makes something behave like a relatively
positioned element, except when it hits a
defined distance, it sticks.
And that's making a sidebar stick using position
sticky.
