Hello fellow Elementorians,
While Elementor is a incredibly useful website builder, sometimes we need to get our hands dirty to achieve certain effects/functionalities.
Here is a step-by-step to End Sticky Sections in Elementor.
How it Works?
This process works by containing an inner-section widget inside of a column. This way, you can keep your sticky-section from interfering with other content.
For example, if this is a product page on an ecommerce website you could set one column to display products. On the other hand, the sticky-section could be filters that follow while you scroll down the page whilst not interfering with other content past a specific point. This « specific point » would refer to the end of the column.
Create a Section & an Inner-Section
Create your section. Within one of your columns, place an inner-section widget. Keep in mind that this inner section will only stay inside of this column.
Select your inner-section you would like to make sticky. In the top-right of the settings select Advanced > Custom CSS > Paste This Code
This code will keep your inner-section contained, yet sticky within your column.
How to Adjust Height Offset?
The portion of this code
top: 90px; specifies how far the inner section should be offset from the
top of the page. This will keep your sticky section from interfering with your header. Since every website is different, feel free to play with this according to your specific needs.
Tell Me How It Worked!
Comment below and let me know how this works out!