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; top: 0; on something. But for it to work, it’s gotta be within a taller parent element. So, the unordered list (
- ) within the navigation (