Create a sticky sidebar

Learn how to create a sticky sidebar using position sticky.

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

In this lesson, we show you how to keep a sidebar fixed to the right side of the screen using position: sticky after a visitor hits a defined distance from the top of the viewport while scrolling.

Setting position sticky

Position sticky alternates the position of an element between relative and fixed based on the viewer’s scroll position. A sticky element is relative to the document flow until a defined scroll position is reached, then it switches to behaving like a fixed element within its direct parent. Once, the sticky element hits the bottom of its parent, it doesn’t scroll past it.

Position sticky
Style panel → Position → Position → Sticky
  1. With the sidebar selected, apply position sticky in the Style panel. You'll notice that if you scroll, the sidebar doesn't stick! It remains in its natural place in the document flow. That's because we didn't define a distance yet.
You must specify at least one position value for the top, bottom, left, or right side for sticky positioning to work. This depends on where your element is positioned within the parent and how you're scrolling, vertically or horizontally.
  1. Define a distance from the top. Set the top value to 0px if you want the sidebar to stick to the top of the page, or set another value, say 30px, to make it stick to the top of the page with a distance of 30px from the top. Now, when you scroll, the sidebar should stick to the page as long as you're scrolling within the container, the direct parent, of the sidebar.

Troubleshooting position sticky

Sometimes, position sticky won't work even though you've set the position to sticky and defined a distance value for one of the sides of the element. That can happen for many reasons:

  • Position sticky will most probably not work if overflow is set to hidden, scroll, or auto on any of the parents of the element.
  • Position sticky may not work correctly if any parent element has a set height.
  • Many browsers still do not support sticky positioning. Check out which browsers support position: sticky.

Position sticky may also not work if the position distance value is set on a side that isn't affected by the scrolling. For example, if you set the distance on the left or right, and you're scrolling through the page vertically, the element won't stick. Another example would be if you've set a distance to the bottom, for instance, instead of the top and your element is aligned to the top of the parent — it's either the first element in the parent or aligned to the top with flex or grid alignment settings.

Sticky to the bottom
To keep the sidebar sticking to the bottom of the page, define a bottom value and change the alignment of the sidebar if it's a flex child or a grid child.

Browser support

Can I Use css-sticky? Data on support for the css-sticky feature across the major browsers from caniuse.com.