Today I Learned - Rocky Kev

TIL Sticky navbars with pure CSS

POSTED ON:

TAGS: css

There's a dozen ways to do everything in web development.

Google "Sticky Header", and you'll get a crapton of tutorials.

Depending on when it was written, you'll get all sorts of things.

From 2010-2015, they'll do it using jquery.

From 2016-2018, it's done with vanilla javascript and measuring document heights.

These days, it can be done using Observer API.

But you don't even have to use javascript.

#navigation {
    position: -webkit-sticky;  // required for Safari
    position: sticky;
    top: 0; // required as well.
}

REFERENCE:
https://webdesign.tutsplus.com/tutorials/sticky-positioning-with-nothing-but-css--cms-24042

Related TILs

Tagged: css

TIL the alternate keyword

If 'alternate' appears along with the stylesheet keyword, the linked file is an alternative stylesheet. It won’t be applied to the document, but it will be ready for when we need it.

TIL Logical Properties

For that sweet sweet Internationalization you want to avoid directional words like 'left', 'right', 'top', and 'bottom'.

TIL Using pseudo-classes in your querySelector!

let notTuna = document.querySelectorAll('.sandwich:not(.tuna)')