Create a sticky sidebar

Use “position: sticky” to create a sticky sidebar.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

“position: sticky” is a Cascading Style Sheets (CSS) property that can be used to make an element stick to a specific position on the screen as the viewer scrolls — like pinning an element in place. “position: sticky” can be a handy way to keep important elements, like sidebars, visible to site visitors as they navigate through your site.

In this lesson, you’ll learn:

  1. How to set “position: sticky”
  2. Troubleshooting

How to set “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, at which point it behaves like a fixed element within its direct parent. Once the sticky element hits the bottom of its parent, it doesn’t scroll past it.

To set “position: sticky” on a sidebar:

  1. Select the sidebar on the canvas
  2. Go to Style panel > Position
  3. Choose Sticky from the dropdown
  4. Add a value for the top, bottom, left, or right side (e.g., 0px, 30px, etc.)

You have to specify at least one position value for the top, bottom, left, or right side for “position: sticky” to work. This depends on where the element is positioned within the parent and how a viewer is scrolling (i.e., vertically or horizontally).

To make the sidebar stick to the top of the page, set the top value to 0px, or, if you want it to stick to the top of the page with a 30px distance from the top, set the top value to 30px. When you scroll, the sidebar should stick to the page as long as you scroll within the container (i.e., the direct parent) of the sidebar.

Troubleshooting

“position: sticky” may not work correctly if:

  • there is no defined distance value for at least one side of the element (i.e., top, bottom, left, or right)
  • overflow is set to hidden, scroll, or auto on any parents of the element
  • any parent element has a set height
  • the browser doesn’t support sticky positioning

“position: sticky” won’t work if there is no defined distance value for at least one side of the element (i.e., top, bottom, left, or right). If a distance value is set on a side that isn’t affected by scrolling, “position: sticky” may not work as expected. For instance, if you set the distance on the left or right and scroll through the page vertically, the sidebar won’t stick.

“position: sticky” may also be affected by alignment settings if the sidebar is a flex or grid child. For example, if you set the distance on the bottom and the sidebar is aligned to the top of its parent element with flex or grid alignment settings, the sidebar won’t stick to the bottom of the page.

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top