Why it's time to embrace position sticky
Tags: webdev, css, devtips, learning
Published: 2018-10-15 12:29:50

---
title: Why it's time to embrace position sticky
cover_image: https://thepracticaldev.s3.amazonaws.com/i/k640kcd726xbu991xtre.jpg
published: true
description: Position sticky has often been avoided because of poor browser support. But now global browser support is above 86% it could be time to try it out!
tags: webdev, css, devtips, learning
---
Whenever I've taught people about CSS position, I've always warned against using `position: sticky;`. 

Browser support for all position values has been great, except for sticky. So, what's the point in using something that's not going to work a lot of the time?

But, I must say, I've now changed my tune! During the build of [Frontend Mentor](https://www.frontendmentor.io), I was looking for a simple solution to create a sticky menu on the resources page. The menu allows you to jump between categories on the page and is not part of the main header. All it needed to do was stick to the top of the viewport when the element was scrolled to and leave when the container was scrolled past.

Sure, it would be very easy to install an npm package to achieve that effect, but I wanted to use the simplest approach possible.

As I knew this was the exact behaviour offered by `position: sticky;` I thought I'd have a look at current browser support:

![caniuse.com browser compatibility stats with CSS position sticky, showing over 86% global browser compatibility](https://i.imgur.com/c3G49nb.png)

Not too bad! Over 86% of browsers used around the world support `position: sticky;` and pretty much all major modern browsers support it. 

But what happens if someone comes to the site on a browser that doesn't support it? Simple! The element just doesn't stick to the viewport. No mass chaos or breaking of the internet. Just no sticky element.

The site's main users are web developers (both current and aspiring). So it was entirely reasonable to assume the vast majority of people accessing the site will do so through a modern browser.

I went ahead and used it, and I must say it put a smile on my face 🙂 Here's the menu bar sticking to the top of the viewport as you scroll down the page:

![Animated GIF of CSS position sticky property sticking navigational menu to the top of the screen](https://i.imgur.com/z5OuuvZ.gif)

And here it is un-sticking itself as you scroll past the parent element:

![Animated GIF of CSS position sticky property releasing navigational menu from the top of the screen when the user scrolls passed the container](https://i.imgur.com/EoA0n4z.gif)

Easy!

If you'd like to check it out properly, [head over to the resources page on the site](https://www.frontendmentor.io/resources).

Want to have a sticky sidebar on your blog post page? The basic markup could be as follows: 

```html
<!-- parent element -->
<section> 
    <article>
        ...
    </article>

    <!-- sticky element -->
    <aside>
        ...
    </aside>
</section>

```
As soon as the `section` element moves out of the viewport the `aside` will un-stick itself and move off-screen.

So, next time you're in need of a sticky sidebar or a menu, like me, consider using `position: sticky;`. 

## Keep in touch

If you'd like to stay in touch you can [follow Frontend Mentor](https://twitter.com/frontendmentor) or [follow my personal account](https://twitter.com/_mattstuddert) on Twitter. Feel free to say hi! 🙂