Sticky navigation bar without JavaScript

#javascript #css #frontend #webdev

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.