Studio Editor: Creating Sticky Elements and Sections
2 min read
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.
In this article, learn more about:
Applying the sticky position to an element or section
- Select the relevant section or element.
- Click the Open Inspector arrow
at the top right of the Editor. - Scroll down to Position.
- Select Sticky from the Position type drop-down.
- Choose where the section/element sticks to: Top, Bottom, or Bottom and top.
- (Optional) Enter an offset value to create space above or below.
Note about the DOM order:
By default, the page's DOM order, including the section order, is automatically organized. If you want a "sticky" section to appear above others in the DOM, right-click the section, select Arrange and Bring to Front.
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:
- Select the relevant section or element.
- Click the Open Inspector arrow at the top right of the Editor.
- Scroll down to Position.
- Select Default from the Position type drop-down.
