Select Page

Category: sticky

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. Sticky 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 (...

Read More

Sticky as a Local Fixed?

Lemme set the stage a bit here. You have a website and, like most, it scrolls. This website will have modals. You’ll probably position: fixed the modal so that it’s predictably positioned regardless of scrolling. It’s possible the modal itself will scroll. Notice the modal has a close button. We can position: absolute that in the upper-right corner, but if our modal scrolls, it’s a problem. We’ve lost the close button behind the scrolling. Should be a job for more position: fixed, right? Not really, sadly, as there is no such thing as a local context for position: fixed....

Read More
000webhost logo