General
Sticky Elements is the first advanced feature added to an Elementor addon that allows you to stickt widgets and sections in any parent element on scroll.
Why use Sticky Elements?
Whether you want to keep content in view or create some interesting effects, using Sticky Elements is the perfect solution. It works with widgets and sections, allows you to choose the HTML element in which it stays and gives you options for offsets, responsive disabling and a few others.
How it works
Choose a widget or a section and in the Elementor editor panel on the left, go to the Advanced tab. Locate the section called Extras and set “Sticky” to “Yes“. This will enable sticking the element at the top of it’s parent when the scroll position of the page reaches the top of the element’s original position.
Settings
Sticky for sections
- Stay In — This control defines the parent element in which the widget will stick.
- Parent (Default) — For first level sections, this will be the whole container that wraps all the sections on the page. If you your section is an Inner Section element, the parent will be the column in which it resides. In this case, in order for the Inner Section element to stick, the column needs to be taller than the height of the Inner Section you’re trying to stick, which is not the case by default as the parent section will default to “Column Position” set to “Top” (Default). For it to work you will have to set”Column Position” to “Stretch“.
- Page Body — The whole <body> element of the page.
- Custom Parent — An element which has to be a parent of the section, specified through a CSS selector.
Sticky for widgets
- Stay In — This control defines the parent element in which the widget will stick.
- Parent Column (Default) — The widget will stick is the first parent column. If your column contains just the one widget that you are trying to stick and the parent section has the option “Column Position” set to anything else except “Stretch“, make sure it is set to “Stretch” as that will allow it to move inside the stretched column.
- Page Body — The whole <body> element of the page.
- Custom Parent — An element which has to be a parent of the section, specified through a CSS selector.
- Parent Section — The widget will stick in the first parent section available. Since Elementor can have nested sections, this will be the first direct section.
Other Settings
- Unstick on — You can choose to remove the sticky on tablet, mobile or none.
- Follow Scroll — When the height of the element that is being stuck is bigger than the viewport area (window), and the visitor is scrolling down the page, the bottom of the element will remain stuck to the bottom of the viewport instead of the top of the element.
- Offset Top — Distance from the top of the element when the element starts sticking to the viewport.
- Offset Bottom — Distance from the bottom of the sticky parent when the element stops sticking.
Frequently Asked Questions
Enabling the Extras Sticky Element extensions disables the Elementor Scroll Effects section
At this moment you can either use the Sticky Element OR the Elementor Scroll Effects sticky option. The two are incompatible. You can disable the Sticky Elements extensions under Elementor > Extras > Extensions.
How can I stick an element across more than one section?
Option 1: Use the Inner Section widget — Instead of having your sections as first level sections, use Inner Section widgets for your sections and place them inside a bigger section. Give that outer section an id or a class, such as #sticky-parent. Click on the widget you want to stick, go to Advanced > Extras > Sticky > Stay In and set this control to “Custom Parent“. In the “Parent Selector” control enter #sticky-parent.
Option 2: Use templates — Place the widget you want to stick in the first section. Go to Advanced > Extras > Sticky > Stay In and set this control to “Custom Parent“. In the “Parent Selector” control enter an id such as #sticky-parent (can be anything and you have to enter the pound if it’s an ID or a dot if it’s a class). Save all the sections as a template and add that template to the page using the Template widget. Select this Template widget, go to the Advanced tab and under CSS ID, enter sticky-parent.