DEV Community 👩‍💻👨‍💻

Claire Parker-Jones
Claire Parker-Jones

Posted on

How to make a sticky sidebar with two lines of CSS

Have you ever been on a website where an element “sticks” to the screen and follows you as you scroll down the page? This is what I call a sticky sidebar, and I’ve spent many hours battling with legacy code trying to debug one. In the past, developers used JavaScript to build this feature, by recalculating the position of the sidebar on the browser's scroll event. This was complicated to maintain and also costly for performance.

Recently I was delighted to discover that all major desktop browsers (Chrome, Firefox, Edge and Safari) now support the CSS property position: sticky. (Aside from a bug in Chrome with some table elements.) Edge was the final browser to ship support in October 2017 in version 16, which you can check on This means that we can build a sticky sidebar using just two lines of CSS, with no JavaScript required! Let me show you how.

First set up two divs. One represents the main page content and should extend past the bottom of the screen. The second will be the sidebar, which we'll make shorter than the length of the screen, so we can clearly see it moving in our example. We use flex to position them side-by-side, because it’s 2018 and also because I love flex.

Use the following HTML and CSS:

<div class="wrapper">
  <div class="main">
    Main content
  <div class="sidebar">
    Sticky sidebar
Enter fullscreen mode Exit fullscreen mode
.wrapper {
  display: flex;
  justify-content: space-between;

.sidebar {
  border: 3px solid black;
  padding: 15px;
  background-color: #fff;

.main {
  width: 60%;
  height: 150vh;

.sidebar {
  width: 25%;
  height: 25vh;

body {
  background-color: #ccc;
  font-family: sans-serif;
  padding: 10px;
Enter fullscreen mode Exit fullscreen mode

This gives us two elements that look like this:

Static sidebar and main content

Note the heights of the main and sidebar elements are set using vh units. 100vh is the height of the current viewport, so setting the height of the main div to 150vh gives it a height that will be 1.5 times that of the screen.

But the sidebar isn’t sticky yet! When you scroll down the page, the sidebar doesn't follow. All we need to do to fix that is to add two lines of CSS:

.sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
Enter fullscreen mode Exit fullscreen mode

(OK I lied, three lines for Safari compatibility with the -webkit- prefix.) And there you have it, scroll down the page and the sidebar will stick to the top of the screen and follow you down!

Sticky sidebar and main content

The position: sticky property tells the element to stick to the screen, (MDN can explain this better than me), and the top value tells the element where to sit relative to the screen as it scrolls. We could change this to top: 5% to leave a gap, or for example left: 0, depending on the direction of the scroll.

Here is one I made earlier on CodePen:

Try changing the height of the sidebar to 110vh and see how it stops at the bottom of the screen. Nice!

Can I use position: sticky in production?

position: sticky is still an experimental API, so use with caution. Read the draft spec here. Always consider which browsers you support when making a decision like this. Combine this information with caniuse to make an informed decision. Use the stats for all browsers on caniuse and not just the newest versions. Ask yourself, how would it affect the user's experience if the sidebar wasn't sticky? Would the website break completely or would they lose a nice-to-have decorative feature?

As always, it depends on your particular app and there isn't an answer that applies to every situation. But it's really cool that we can now build features like this purely with CSS and a handy tool to have in your CSS toolkit.

Top comments (23)

booligoosh profile image

Nice post! Is there any reason that you couldn't do this with the more widely-supported position: fixed?

vlasterx profile image
Vladimir Jovanović • Edited on

"Fixed" is always fixed to the window coordinates, while "sticky" is displaying similar behavior like elements made with javascript. Solving this UI problem with CSS is always a better solution when it comes to UI performance.

Here is an example I found online:

Worldwide adoption is 86%, so we may start to use it.

As always, only retarded Microsoft browsers are problematic.

booligoosh profile image

I understand the difference, however in the example the sidebar starts at the top anyway so there is no difference.

Thread Thread
vlasterx profile image
Vladimir Jovanović

Make window smaller and scroll up and down, so you will notice where is the difference.

emekaorji profile image

This helped, Thanks!

tombrown profile image

correction on my last post, which I don't see now so not sure if it was sent.

I removed the width components on sidebar and main with no change on functionality, not the height. I changed the main height to 100vh for my scenario and its works fine, but the sidebar height has to be at least 150vh in order for this to work.

alahmadiq8 profile image
Mohammad Alahmadi

I found this article by googling sticky sidebar. This super super helpful and to the point. Thank you so much!

biamorton profile image
Bianca Morton

What if I want the opposite? I want it to scroll first and then go sticky so if you have a menu and a LOOONG post people can get to the bottom of the menu before scrolling all the way to the bottom of the post.

williampattrix profile image
williampattrix • Edited on

Hello @claire Parker-Jones

How can i develop Side note for my wordpress website i want to display side note on my Post page with Sticky way. where my users can directly go to the desired topic on a post

for example check this site website:

i want to implement on my affiliate website where my users can directly to product page instead of reading entire guide


nejurgis profile image

And how would you do it if theres several elements where each of them have their own contents that they have to 'stick to' ?

tolkodelo profile image

thank you!

sait profile image
Sai gowtham

Does it work in Firefox?

anhfactor profile image

Wow, thats easy.

tombrown profile image

This worked great on rails 5.2 with bootstrap 4 installed. I removed the height components for the sidebar and main page with no impact on functionality. Awesome post, thank you.

johnny profile image
John shim • Edited on

thanks this really helped me after all struggles

aparnau profile image
Aparna Unny

Nice post Claire.. Is there any IE11 supported feature too or a fallback for IE11?

aaronmarkle profile image
Aaron Markle

I remember last year wishing there was more support for position:sticky. Glad to see it has improved across the major browsers, I will definitely be using this from here on out!

akhbarejadid profile image
Akhbarejadid • Edited on

how can I get sticky specific sidebar just when scrolling?
Anyway the position:sticky; dones't work at all

Some comments may only be visible to logged-in visitors. Sign in to view all comments.


Thank you.

Thanks for visiting DEV, we’ve worked really hard to cultivate this great community and would love to have you join us. If you’d like to create an account, you can sign up here.