DEV Community

loading...
Cover image for Sticky navigation bar without JavaScript

Sticky navigation bar without JavaScript

Christoph Grabo
*mörb*
・2 min read

Have you ever wanted to create a sticky menu, but without the hassle of writing extra JavaScript for it? CSS got you covered now!

Example animation of a sticky menu bar

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;
Enter fullscreen mode Exit fullscreen mode

Stylesheet

.navbar {
  position: relative;
}
.sticky {
  position: fixed;
  top: 0;
  left: 0;
}
Enter fullscreen mode Exit fullscreen mode

After

JavaScript

// nope
Enter fullscreen mode Exit fullscreen mode

Stylesheet

.navbar {
  position: sticky;
  top: 0; /* it does not reposition right away,
             but determines at which point it sticks */
}
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (5)

Collapse
jlrxt profile image
Jose Luis Ramos T. • Edited

Una lectura sin tanto rodeo. Me a gustado tu publicación. Experimentare el código. Saludos.

Collapse
micahlt profile image
Micah Lindley

Great post! I've looked forward to support for sticky since it was first introduced. Glad to see that support is widening!

Collapse
pavelloz profile image
Paweł Kowalski

If you have internal links you might want to take a look at this post: dev.to/platformos/scrolling-to-the...

:)

Collapse
kenovienadu profile image
Ovienadu Ken

I recently had to try this on a project. Sadly, Safari browsers handles it a little differently.

Collapse
asaaki profile image
Christoph Grabo Author

That's interesting, since Safari is supposed to have full support according to caniuse.com/css-sticky.
What's the issue with that browser?