Sticky, Smooth, Active Nav

Just like the title says! Here’s a sidebar navigation bar that…

Uses sticky positioning. It stays on the screen when it can, but won’t overlap the header, footer, or ever make any of it’s links inaccessible.
Scrolls smoothly to the sections you click to.
Activates the current nav based on scroll position (it’s a single page thing).

See the Pen Sticky, Smooth, Active Nav by Chris Coyier (@chriscoyier) on CodePen.
It’s easy to toss position: sticky; …
The post Sticky, Smooth, Active Nav appeared first on CSS-Tricks.