Here’s a navbar.
Traditionally, people have used position fixed
to yank the navbar out of the document and
keep it fixed on top.
But because we’re using fixed positioning,
things aren’t quite right without tweaking.
And the navbar’s dimensions are no longer
affecting other content.
So, traditionally, we’ve calculated the
navbar’s dimensions using differential calculus,
and manually tweaked our way to the desired
result.
No more.
Enter: position sticky.
The fastest way to stick a navbar to the top
of your page since industrial adhesive.
It takes three steps and exactly 11 seconds,
including narration that follows this exact
script:
1.
Make sure the navbar is a direct child of
the body.
2.
Set the position to sticky, with a top value
of zero.
3.
Set an obscenely high z-index value.
That’s it.
Because the top value is zero, it keeps the
navbar on the very top of the page.
And, because we used a high value for z-index,
it stacks on top of other page content.
And that’s using position sticky to stick
an element like a navbar to the top of the
page.
