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.
<script> /* Please login to get the code * The code will be for the Create an Elementor Sticky Column Only Within a Section tutorial * Found at this URL https://element.how/elementor-sticky-column/ */ </script>
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
<script> /* Please login to get the code * The code will be for the Create an Elementor Sticky Column Only Within a Section tutorial * Found at this URL https://element.how/elementor-sticky-column/ */ </script>
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
Hi Maxime,
It's working on one page but for some reason not in the other. Even though they are pretty much the same. Any ideas?
The working one:
https://www.foliofurno.com/edm/
The not working one:
https://www.foliofurno.com/ivanhoe-grammar-international-prospectus/
Can't figure it out! Help please!! 🙂
Thanks!
Ha! I actually figured out what was wrong... I'll need to rework all my templates though :/
Hey Maxime, this is a great effect and I'm trying to achieve something similar. I'd like the sticky element to be vertically centered (50%) when it becomes sticky. Is that somehow possible? I tried various options, but wasn't able to get it done properly. Any idea?
Thanks, Lukas
Hey Lukas!
Yes this is possible. Use this CSS:
.titlesticky { position: sticky; position: -webkit-sticky; top: 50%; transform: translateY(-50%); }Your design might require some spacing adjustments however to make this CSS only method work...
In some premium tutorials, I used JavaScript to calculate the top value required to have it vertically centered, without requiring transform: translateY(-50%); which can cause some challenges.
Cheers!
Hey Maxime!
Thanks for the quick response! Actually that was what I had before and it caused exactly the challenges you described, so I was kinda hoping for that Javascript solution😄 I am a premium member already, so can you point out to that premium tutorial you mentioned? Somehow I couldn't find it...
Cheers!
Hey Lukas!
Sorry I didn't realize you were a premium member!
I have this in this tutorial: https://element.how/elementor-cross-fade-images-on-scroll/
Cheers!
Hey Maxime!
Thanks for sharing the premium tutorial. I've tried, but unfortunately I'm not able to copy over the template. Even after checking the comments, I checked my settings and it should be all fine (Latest version of elementor, containers are activated). Could it be the template is not the latest version? Or what else could be the issue?
Thanks for your help.
Hey Lukas,
Are you both copying and pasting from Chrome? It doesn't work well in other browsers...
Hmm yes I always use Google Chrome. When I want to paste your template it shows me an error message… is there a way to download the template maybe?