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!
Position sticky is a new feature and it's part of the new Style panel which is currently in Beta.

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.

Enable the new Style panel
To enable the new Style panel, toggle the Beta switch.
In this lesson

In this lesson, we show you how to keep your navbar fixed to the top of the screen using position: sticky after a visitor starts to scroll past the navbar's initial position.

Must know: Position sticky isn't fully supported in all browsers. Learn more.

Creating a navbar

First, if you do not already have a navbar, you can create one using the navbar component in the Add panel, or create one from scratch using div blocks and text links. You can also save this navbar as a symbol so you can easily add it onto other pages.

Resources

Positioning the navbar

First we want to make sure that the navbar is a direct child of the body element. Why? Because we want it to stay on top for as long as we’re scrolling the page. The sticky position will keep the navbar in this initial position until you scroll to the point where by default you’ll scroll past the navbar, but in this case, the navbar will just stick to the top of the page while the remaining content of your page scrolls away. And when you scroll back to the top of the page, the navbar will reposition itself in its initial position.

Setting the position of the navbar to sticky

Now, we’ll select the navbar and head to the Style panel. Here we’ll set the position to sticky and set a top value of zero to keep the navbar fixed to the very top of the page when we scroll. And to ensure the navbar stays on top of all other content, we’ll make sure to add a high z-index value.

Position sticky
‍Style panel → Position → Position → Sticky
Must know 
It’s important to set a value to at least one side of the sticky element for the sticky position to work.

Why use position sticky and not fixed?

Position fixed removes the element from the document flow, so the navbar will float on the entire page and overlap other elements. We don’t want this to happen when the navbar is still in its initial position. We only want the nabvar to stay fixed and floating above other elements when we’re scrolling. So, if you want to use position fixed, you’ll need to create two navbars and use interactions to create a sticky navbar.

On the other hand, position sticky keeps the element in the document flow and only sets it to position fixed when the element’s initial position is scrolled away. So, the navbar stays exactly where you’ve placed it without overlapping adjacent elements until you start to scroll past it, that’s when it becomes fixed to the viewport.

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