Create an Elementor Sticky Column Only Within a Section

No extra plug-ins required! Elementor Free Compatible.

Someone asked in the Facebook group how to create a sticky column in Elementor but only from and up to a certain point... Here is how it can be done with CSS3 only.

You can see the working example of an Elementor 'made sticky' column further down the page.

To begin with, create a 2 column section

Add a bunch of stuff in the left column to make the whole section very tall, then add everything you want to be sticky in an inner section in the right column. That will be the Elementor sticky column, that will stay sticky until the end of the column.

Then, give this inner section a class name. I called mine ' titlesticky '

Then, add this CSS to your place of choice

I like to keep it all in the same place to find it easily afterwards. In Page settings / Advanced / Custom CSS is a good place. If you have Elementor free, see How to easily add custom CSS with Elementor Free.

.titlesticky{
position: sticky;
position: -webkit-sticky;
top: 3rem;
}
.parent-sticky 
.elementor-widget-wrap {
display: block!important; 
}

After, give the parent column the class of 'parent-sticky'

This is to help prevent a bug in iOS and Safari.  The parent column is the column into which the inner section is located. 

Finally, adjust the CSS to fit your needs

Adjust the top: 3rem; value to the correct value to initiate the stickyness. You can also make it sticky from the bottom by changing ' top:3rem; ' to ' bottom: 3rem; '.

Important: if it doesn't work, most probably you have a parent section with overflow:hidden . Whether from the section settings, or with CSS (such as body { overflow: hidden; }  ). For position sticky to work in every browser, no parent section can have overflow hidden.

To quickly find out what parent might be set to overflow:hidden,  run this jQuery in your browser console.

It will tell you the value of the overflow property on every ancestor.

jQuery('.your-sticky-element').parents().filter(function() {
console.log(jQuery(this));
console.log(jQuery(this).css('overflow'));
return jQuery(this).css('overflow') === 'hidden';
});

 

Create an Elementor Sticky Column Only Within a Section
Play Video

Mobile users, see the video for the working example! Because mobile view is only one column, a demonstration can't be made here. Or you can try landscape-viewing this page.

Create a Section Showcasing Products Features
Create a Section Showcasing Products Features
home
Create a Section Showcasing Products Features
Create a Full Screen Responsive Menu With Elementor and CSS
Create an Elementor Sticky Column Only Within a Section

Buy now!

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur

adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Comments

Create a Section Showcasing Products Features
home
Create a Full Screen Responsive Menu With Elementor and CSS
Create a Section Showcasing Products Features
Create an Elementor Sticky Column Only Within a Section
Get an Elementor Pro Popup To Show on Hover !
Create a Section Showcasing Products Features
Create a Section Showcasing Products Features
Create a Full Screen Responsive Menu With Elementor and CSS
Create an Elementor Sticky Column Only Within a Section
home
Get an Elementor Pro Popup To Show on Hover !
Create a Full Screen Responsive Menu With Elementor and CSS
Create a Section Showcasing Products Features
home
Create an Elementor Sticky Column Only Within a Section
Create a Section Showcasing Products Features
Get an Elementor Pro Popup To Show on Hover !
Create a Full Screen Responsive Menu With Elementor and CSS
< News >

Enjoyed this tutorial? Get more awesome designs, right in your inbox!

No spam, not more than one weekly email.

Addons Resources
Addons
Resources
Addons
Finder Tool
Addons
Discount Codes
Addons
Review
< Recent Designs >

Visit the Learning Center For More Designs !

Created by <Element Or Codes>