Create an Elementor Sticky Column Only Within a Section
Get Premium

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

 

Elementor Split 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; ‘.

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. 
<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>
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 an Elementor Sticky Column Only Within a Section
Create an Elementor Sticky Column Only Within a Section
Create an Elementor Sticky Column Only Within a Section
Create an Elementor Sticky Column Only Within a Section
Create an Elementor Sticky Column Only Within a Section
Create an Elementor Sticky Column Only Within a Section

Buy now!

Please Buy!

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 an Elementor Sticky Column Only Within a Section
Create an Elementor Sticky Column Only Within a Section
Create an Elementor Sticky Column Only Within a Section
Create an Elementor Sticky Column Only Within a Section
Create an Elementor Sticky Column Only Within a Section
Get an Elementor Pro Popup To Show on Hover !
Create an Elementor Sticky Column Only Within a Section
Create an Elementor Sticky Column Only Within a Section
Create an Elementor Sticky Column Only Within a Section
Create an Elementor Sticky Column Only Within a Section
Create an Elementor Sticky Column Only Within a Section
Get an Elementor Pro Popup To Show on Hover !
Create an Elementor Sticky Column Only Within a Section
Create an Elementor Sticky Column Only Within a Section
Create an Elementor Sticky Column Only Within a Section
Create an Elementor Sticky Column Only Within a Section
Create an Elementor Sticky Column Only Within a Section
Get an Elementor Pro Popup To Show on Hover !
Create an Elementor Sticky Column Only Within a Section
Tagged

21 Responses

  1. 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"?

    1. 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.

  5. 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?

    1. 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!

  6. 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.

  7. 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

  9. 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

    1. 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!

      1. 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!

  10. 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.

      1. 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?

Leave a Reply