0

Create an Elementor Sticky Column Only Within a Section

No extra plug-ins required! Elementor Free Compatible.

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; 
}

Then, add this CSS to your place of choice

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('.titlesticky').parents().filter(function() {
console.log(jQuery(this));
console.log(jQuery(this).css('overflow'));
return jQuery(this).css('overflow') === 'hidden';
});
×

Your Cart

No products in the cart.
Start shopping

Contact Us

About Us

“Royal Technologies” is a System Integration house that supports Web Design, Web Hosting, Domain Registration, Email Marketing, Web Display Advertising, Search Engine Optimizing, Office Networking, IT Consulting, Corporate Branding, Remote or Telephone Support and Software Development. In simpler terms it’s an IT Company dealing in various aspects of implementation and maintenance of computerization. We have learnt from experience and have molded ourselves to be complete IT Company.

Location Map