Have you ever wanted to create a sticky menu, but without the hassle of writing extra JavaScript for it? CSS got you covered now!
The key for success is the property position: sticky
. And despite it being marked as "partial support" for the majority browsers, it is working pretty well. The "partial" is due to the fact that some browser don't deal with that property correctly in some table setups. If you do not use tables and don't want some stickiness there, you're good to go.
The following is my code change on my personal site:
Before
JavaScript
const navbar = document.querySelector('.navbar');
let sticky = navbar.offsetTop;
const navbarScroll = () => {
if (window.pageYOffset >= sticky) {
navbar.classList.add('sticky')
} else {
navbar.classList.remove('sticky');
}
};
window.onscroll = navbarScroll;
Stylesheet
.navbar {
position: relative;
}
.sticky {
position: fixed;
top: 0;
left: 0;
}
After
JavaScript
// nope
Stylesheet
.navbar {
position: sticky;
top: 0; /* it does not reposition right away,
but determines at which point it sticks */
}
As the comment states, you will need top
to tell where to stick once the element scrolled to it. Meaning: as long as you have not scrolled the bar up to top zero of your current view, it will keep scrolling up. Afterwards it stays there.
Not tested, but this could also work in all other directions. Someone up for a bottom bar? ;-)
Conclusion
I think 2 lines of CSS are better than several in CSS and JS.
What's not present yet is a way to apply different style when stuck or not, since there is no CSS selector for that. Dunno if that will ever come, but one can hope.
I recently blogged about this and JS usage in general in my article »How I wrote JavaScript to avoid JavaScript« - don't worry, you do not have to throw away everything like I did. But I want to give you some food for thought. Maybe you realize you solved your problems with way too much JS.
Also check out the specs and development of HTML and CSS standards, there are always interesting things to discover. One of the biggest changes in recent years were flexboxes and grids, I guess many web designers welcomed these additions.
Top comments (5)
Una lectura sin tanto rodeo. Me a gustado tu publicación. Experimentare el código. Saludos.
Great post! I've looked forward to support for
sticky
since it was first introduced. Glad to see that support is widening!If you have internal links you might want to take a look at this post: dev.to/platformos/scrolling-to-the...
:)
I recently had to try this on a project. Sadly, Safari browsers handles it a little differently.
That's interesting, since Safari is supposed to have full support according to caniuse.com/css-sticky.
What's the issue with that browser?
Some comments may only be visible to logged-in visitors. Sign in to view all comments.