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.
You can also check out these related premium tutorials:
Elementor Cross Fade Images on Scroll Design
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; ‘.
Elementor Sticky Column Template
This download gets you the following template :
Elementor Sticky Restaurant Template
Elementor Sticky Smartphones Template
Related tutorial : Elementor Sticky Column
jQuery('.titlesticky').parents().filter(function() {
console.log(jQuery(this));
console.log(jQuery(this).css('overflow'));
return jQuery(this).css('overflow') === 'hidden';
});
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.
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.
I tried this in combination with a simple list menu that uses anchor points to send the users to spesific areas of a one page setup website. Is there any way of marking to the user that they are now in "this or that" section. f.eks by making the link have a background colour when "active"?
Hello Ingrid! You will need to specifically use the 'menu anchor' elements for this to work well with Elementor 'nav menu' element. Then, it should automatically have the 'active' styling set under 'Styling' options for the element.
Thank u so much Brother. Love it.
Glad to read this!
Thank you so much, was looking for exactly this solution. Works like a charm.
Welcome!
Thank you!
Cheers!
Thank you so much for this. I got it to work on a page, but I can't get it to work in a single post template I created in theme builder. Any tips?
Hey Nancy!
You probably have a parent element with overflow:hidden; , or overflow:auto; CSS. That's what usually breaks it. Find out which parent has it, and remove it!
Please include [overflow: auto;]/ [overflow-x: auto;] in the jquery debugger. It took me days to discover.
I had to resort to opening the HTML tags one after the other. Fortunately, it was right up there after the heading tag so didn't have to dig too far.
This is very handy, and great to see in action.
Do you know of a way to achieve a similar effect, but with one column? So that as the user scrolls down, at a certain point the sticky object is encountered. As they continue to scroll that sticky object sticks (say in the middle of the viewport) as the other sections pass by and behind it. Then at a set point the sticky object stops and stays put ... and obviously moves up the screen as the user continues to scroll.
Basically, much the same as what you have illustrated here in this post, but the sticky element isn’t in a column off to one side.
Keep up the great work.
Jonathan