Skip to main content
Adding a Sticky Position addon

Pin an element to your page and set how long it should stick.

Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

The Sticky Position addon empowers users to effortlessly select one or multiple elements letting it seamlessly "stick" to the viewport as users scroll through the page. With this addon, you have the flexibility to fine-tune your website's user experience, ensuring that important elements remain visible and accessible at all times. Enhance navigation, increase engagement, and captivate your audience with this addon.

πŸ‘πŸ½ Adding a Sticky Position addon

From The Top Menu

  • Select the element you'll attach the addon to

  • In the top menu, click on Attach addon to element

  • Search for and select Sticky Position

The settings panel will automatically open so you can customize it.

By right-clicking

  • Right-click the element you want to attach the addon to

  • Select Addons

  • Click Add new

  • Search for and select Sticky Position

From the Addon tab

  • Click the element you want to attach the addon to

  • Click Addon (next to Style) in the right-side panel

  • Select an addon

  • Click Apply addon

Tip: A Pin icon will appear next to the element in the layers panel indicating that it's been added.

βš™οΈ Configuration Options

Parameter

Description

Stick when

Distance to top: Takes the top as the reference for the distance specified in the Stick when distance is field

Distance to bottom: Takes the bottom as the reference for the distance specified in the Stick when distance is field

Stick when distance is

The pixel distance between the element and the top/bottom that makes it stick to the user's view

Stick to which layer?

Stick in front: Pins the element in front of all the elements on your page

Stick to current layer: The element will follow the layers panel (left side panel) hierarchy

Stick behind everything: Pins the element behind all of the elements on your page

How long to stick

Until bottom: The element will be pinned until the page's bottom

Distance: The pixel distance between the element and the top/bottom that unpins the element when reached

To element: Select an element as the reference to unpin the sticky element (you must name the element in the layers panel so that it appears in the list)

Shared Presets

You can save the settings of an addon and reuse them as many times as needed in your project, follow the steps below to learn how to save them.

  • Select the element the addon is attached to

  • Click the Pin icon next to the element in the layers panel

  • Configure the addon

  • Click on the + icon at the top of the panel

  • Write the shared style name

  • Click on the checkmark to save

Click the No shared addon preset dropdown every time you want to reuse your preset, the name you gave it to it will appear in the list.

Tip: Shared presets will only be available for the specific addon you are working with.

Copy-pasting an addon

You can also copy and paste an addon from one element to another but unlike Shared Presets the settings aren't saved and you'll have to copy the addon from the element it's attached to every time you want to reuse it.

Follow the steps below to learn how to do this.

  • Select the element the addon is attached to

  • Click the Pin icon next to the element in the layers panel

  • Click on the copy-paste icon at the top of the panel

  • Close the settings panel and select the element into which you want to paste the addon.

  • Click the copy-paste icon at the top bar

The addon will be added to the element.

Removing an Sticky Position addon

  • Select the element the addon is attached to

  • Click on the Pin icon next to the element in the layers panel

  • In the settings panel, click on the trash icon on the top right corner

The addon has been removed from the element.

Did this answer your question?