DEV Community

How to make a sticky sidebar with two lines of CSS

Claire Parker-Jones on April 16, 2018

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 s...
Collapse
 
booligoosh profile image
Ethan

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

Collapse
 
vlasterx profile image
Vladimir Jovanović • Edited

"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: codepen.io/nyctophiliac/pen/xpmpyp

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

caniuse.com/#search=position%3Asticky

As always, only retarded Microsoft browsers are problematic.

Collapse
 
booligoosh profile image
Ethan

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.

Collapse
 
code_rabbi profile image
Emeka Orji

This helped, Thanks!

Collapse
 
tombrown profile image
tom-brown

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.

Collapse
 
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.

Collapse
 
arndeverafter profile image
Arndeverafter

Hello @biamorton , did you ever solve this?

Collapse
 
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!

Collapse
 
williampattrix profile image
williampattrix • Edited

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: wp.me/aZ4zD

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

Thanks

Collapse
 
nejurgis profile image
Nejurgis

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

Collapse
 
survivezeal profile image
Survive Zeal

What of applying this in WordPress? Would it work on my theme. I think what should be replaced are the class names or sth.

Days ago, I stumbled to get this to work but all to no avail. Thankfully, I now have a lifting content.

Let me see how it goes

Collapse
 
sait profile image
Sai gowtham

Does it work in Firefox?

Collapse
 
tolkodelo profile image
tolkodelo

thank you!

Collapse
 
anhfactor profile image
Mr.Anh

Wow, thats easy.
Thanks!

Collapse
 
aparnau profile image
Aparna Unny

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

Collapse
 
tombrown profile image
tom-brown

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.

Collapse
 
johnny profile image
John shim • Edited

thanks this really helped me after all struggles

Collapse
 
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!

Collapse
 
akhbarejadid profile image
Akhbarejadid • Edited

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

Collapse
 
survivezeal profile image
Survive Zeal

Any update on this? I can't get mine to work on WordPress

Collapse
 
iamtravisw profile image
Travis Woodward

Awesome! Thanks so much!

Collapse
 
damengrandom profile image
Dameng

IE 11 is not supported well.

Collapse
 
katukoju_sasipritham_037 profile image
sasi pritham

Thank you buddy! you saved my day!