Studio Editor: Creating Sticky Elements and Sections

Make a section or an element stick to the page as visitors scroll up and down. When the element or section reaches the visitor's viewport, it sticks to the top, bottom or both. You can set the offset, which is the distance from the top or bottom.

Go to our Wix Studio Academy to check out additional Wix Studio webinars, tutorials, and courses.

Did you know?

You can add a header scroll effect to change the way it looks as visitors scroll up and down. For example, make the header change colors on scroll, or move it out of the way to help visitors focus on the page.

Applying the sticky position to an element or section

1. Go to your editor.

2. Select the relevant section or element.

3. Click the Open Inspector icon

   

   at the top right of the editor.

1. Scroll down to Position.

2. Select Sticky from the Position type drop-down.

3. Choose where the section/element sticks to: Top, Bottom, or Bottom and top.

4. (Optional) Enter an offset value to create space above or below.

5. Select the Keep in front checkbox to enable or disable this option:

   • Enabled: The section / element is visually in the front, but doesn't change its position in the page's DOM order.

   • Disabled: The visual position of the section or element matches its position in the page's DOM order. Depending on how the page is organized, the element / section may not be in the front.

Note:

DOM order is an important part of site accessibility, performance, and search result rankings. We therefore recommend enabling Keep in front—so you can get the visual effect you want, while maintaining the page's structure.

Removing the sticky position

You can always revert elements and sections back to the default position. This means they no longer stick to the screen when reaching the viewport, they stay in their position.

To remove the sticky position:

1. Go to your editor.

2. Select the relevant section or element.

3. Click the Open Inspector icon

   

   at the top right of the editor.

1. Scroll down to Position.

2. Select Default from the Position type drop-down.

Useful tutorials

There are so many interesting effects you can create with sticky elements and sections. Check out these videos from the Wix Studio Academy and explore your options:

• How we built the Wix Studio homepage

• Create a sticky sidebar with no code

• Create a half sticky, half scrolling design

• Add motion and depth will scroll, animations and interactions