Editor X: Setting an Element's Position to Pinned or Sticky

Choose how elements move as visitors scroll down your site. You can position elements you want to highlight as Pinned or Sticky, so they're always visible and accessible.
In this article, learn more about:
Tip:
To enhance your visitors' experience, you can apply additional scroll effects to your images (e.g., Parallax).

Pinning an element to the screen

Keep an element in a fixed position on the screen as your visitors scroll down your site.

To pin an element to the screen:

  1. Click the element in the Editor.
  2. Click Position in the Inspector .
  3. Click the Position type drop-down menu and select Pinned.
  4. Choose where to pin the element to using the drop-down next to Pin to:
    • Container: The element stays fixed in place, relative to its parent container. 
    • Section: The element stays fixed in place as visitors scroll up and down the section. 
    • Page: The element stays visible and fixed in place as visitors scroll up and down the entire page.

Making an element "sticky"

Set your elements to scroll within a container or section. When visitors reach the bottom of that container or section, the element stops scrolling. 

To make an element "sticky":

  1. Click the element in the Editor.
  2. Click Position in the Inspector .
  3. Click the Position type drop-down menu and select Sticky.
  4. (Optional) Add an offset value above the element which is the distance the element should always be from the top of the screen.
See it in action:
The sticky scroll effect can only be viewed while in preview mode or on the live site.

Reverting to the element's default position

You can always remove the Pinned or Sticky scroll effects by changing the element's position back to default.

To revert an element to its default position:

  1. Click the element in the Editor.
  2. Click Position in the Inspector .
  3. Click the Position type drop-down menu and select Default.
Need more guidance?
Check out Academy X, where you can find step-by-step tutorials on how to achieve cool scroll effects. 

Did this help?

|

Hire a Wix Partner

Get help with your website's design, marketing and small tasks from a professional freelancer or agency.
Start Now