Elementor - Making Columns Sticky whilst Scrolling

[@MRJMXHD]

Man, you don't know how much you've helped me. I use Bricks and I've been battling with this all day to no effect. Found this video, applied the same steps to my bricks column and it works beautifully.

[@Ife-Emmanuel]

This is priceless! I've been battling with this for over a week now. Thanks Imran. You're the best!

[@domantasstukas]

Can only confirm this. Thanks for perfect tutorial

[@voyarismus]

My first elementor website and i did search and learned from you days ago. Now second time i am searching and you again :) Cheers& thanks!

[@enioluwaodunjo]

Finally, found a tutorial that solves this. Thanks man

[@annikaenglunds]

This is awesome. Been looking for this typ of effect for a while now. Thank you SO much for this! Subscribing to all your videos pronto.

[@websquadron]

Awesome, thank you!

[@canttouchthis5735]

Hi! Very helpful tutorial. I'm wondering - do you have a tutorial on how to create a sticky table of contents on the side? So the links would higlight as I scroll through? Thanks so much!

[@RaffetAli2006]

Hi Imran, how can I make the scrolling part fading during scrolling up?

[@tomedwardsmusic]

Amazing, exactly what I was looking for! Thank you for the clear explanation 🙌

[@antonio0000x]

I'm having issues doing this with the new Elementor containers. The sticky column stays at the top, but gets pushed to the right margin when scrolling. Anyone else had this issue with containers?

[@websquadron]

There’s alternate methods for flex containers. Have you watched my other video about flex sticky?

[@antonio0000x]

@@websquadron not yet. What's the URL?

[@matthewallen7758]

just what i was looking for, thanks!

[@matthewallen7758]

Actually, I already have an inner section but i need the sticky column on the left side only. Is that possible?

[@websquadron]

Add another Inner to the Inner. kzbin.info/www/bejne/fnrOk3RrmrKpfKs

[@miaobergs]

Fantastic, this was exactly was I was looking for. I searched on Google and your video turned up at the top of the result list. You have always delivered before and you did in once again. This is just awesome, thanks

[@obgutierrez]

Hands down you are a freaking machine! thanks for the trick!!

[@hohen_heim]

A great solution, thanks!

[@KevsGuide]

Does it work on the free version?

[@websquadron]

I’m Pretty sure that you need pro for the sticky bit

[@abhisheksingh9580]

Thank you! 🤩❤

[@websquadron]

No problem

[@naufalhelmisausan6631]

my widget it doesn't have inner section, how suppose to get that...?, and in the advanced > postion it haven't sticky option too

[@websquadron]

Use Containers now

[@naufalhelmisausan6631]

I did, but in "position" just fixed, absolute, & default. not same as yours @@websquadron

[@aymanshexbzeni9681]

they removed this feature in elementor what i have to do ? becuz when i click on advanced motion effect it only present entrance animation ! 🤔

[@websquadron]

They haven’t removed it. It’s still there e

[@CrystalWhitlow]

How do I keep the sticky section from running into the footer?

[@websquadron]

Add another container underneath and set it to be the height of the footer or with a height of 0px

[@simplemortal5068]

thank you for sharing !!! genius :D

[@websquadron]

No worries!

[@hammadhisky]

It seems like you're saying that I gave incorrect advice. You're pointing out that clicking on "Stay in the Column" won't make the content reach the bottom, so adding 100 padding isn't necessary. I appreciate your feedback and apologize if I made a mistake. If there's anything else you'd like to clarify or if you need further assistance, let me know!

[@websquadron]

Who gave advice?

[@AnaBartel-w8x]

Question for you, I love this technique and just used it on a page. I've also added a sticky header menu with anchor links to the page as well. My anchor links pin correctly for the initial scroll but once i click on of them again, the page loses track of where it should go. Do you have any advice to solve this?

[@websquadron]

It should remember

[@NiekVL]

Super helpful, but my sticky section also goes over my footer. Is there a way to get rid of that?

[@websquadron]

Make the Footer have a higher Z-Index

[@carolinalucasgoncalves7463]

@@websquadron It doesn't work for me... Is it because my footer is a template? I've already went to the template and put a higher z-index...

[@teoroven6347]

Is it only on elemntor pro?

[@Power-Down]

is there anyway to do this in the free version? thanks

[@websquadron]

Sorry, no.

[@tushargoel77]

I am unable to find sticky option under the motion effect tab, using Elementor pro.

[@websquadron]

Did you add an inner section or an additional container?

[@dandann00dles]

I found it by selecting the Inner Section using Navigator. Sometimes you think you've got the Inner Section selected but it's actually the containing Col

[@FlyBeee]

Thanks for an awesome tutorial! I have sticky on Desktop only, but the inner section stays sticky on tablet and mobile. How can I stop the inner section from being sticky in tablet and mobile?

[@websquadron]

Hi - try setting the sticky header to be none for the mobile and that should then stop the sticky column too.

[@barakulichova]

Thanks!

[@orelhassid]

Enable "Stay in column" instead of z-index

[@lovelyglorioso6312]

What if the column is too long? I have mine set as sticky but the bottom part is hidden below the fold. How so we add a scrollbar within the column?

[@websquadron]

That might need someone to have a look at that

[@itsallaboutdesign6608]

Wow great! Thanks! How can I give the user the option to scroll in two different ranges, I have one column which is a navigator and the other column is the content, the content is longer than the navigator but the navigator is also longer than the page and also needs scrolling. How do I define a different range for each column?

[@websquadron]

You may need to use {height:500px;} etc for the columns in their css

[@itsallaboutdesign6608]

@@websquadron Wow thanks for your answer! but still not working :( My page looks like this, header, Below that is an area with two columns 1-side navigation and 2-the content I want to enable scrolling to the end of the content, and navigating to the end of the list of items Can a different scrolling range be reduced for each column?

[@arshadkhansagi]

Sir, How to achieve same effect using wkbakery builder????

[@websquadron]

I don't use WPBakery :)

[@alinowruzi1437]

it will work if I use it in first section but when I use in second and third it won't work, can anyone help me

[@websquadron]

Even with the Flex Containers?

[@ShafenBadar]

Enable Stay in Column That makes more sense

[@joshuapycroft]

is it possible to use this to create a page where the item is fixed as you scroll into it as well?

[@websquadron]

Do you mean a sticky column within a sticky column?

[@joshuapycroft]

@@websquadron it’s like on the sky news app on the iPhone, they do it on advertisements. I have a screen grab video is it would make more sense to see it. It’s really cool but I can’t work it out in elementor.

[@Who.Said.Photography]

Cool - like the suggestion for e-commerce, could also be nice for affiliate programs or Google Ads. Thanks for making these, very helpful

[@websquadron]

Absolutely!

[@Mohamed-Ahmaid]

Is possible to apply this method on sidebar menu?

[@websquadron]

Yes if you add the inner section.

[@KarlaOviedo]

Thank you!

[@websquadron]

You're welcome!

[@DarrenTess]

This is great! However its not working on mobile. Any ideas?

[@websquadron]

Never works well on the mobile

[@bestfriendfhn]

Click stay in cloumn.Problem will be solved.It will make the content into the section.So If we scroll It will not go on other section

[@websquadron]

Great answer :)

[@FXMachinima]

Great man thank you!

[@JayAlame]

why don't you just check "stay in column"???? That's what it is for. If you have a section with 2 columns, the left column has minimal content but the right column has much more content. What happens is that the left column will freeze until you scroll to the bottom of the section where the content of the right colulmn comes to an end, then both columns will scroll.

[@websquadron]

Ok

[@tas5247]

Amazing content again. Got a tricky question: how do you get that next section to push the first up rather than overlapping it? So it’s sticky whilst you are in the section and then when the next section comes into frame it pushes the sticky section up??? Hope that made sense! 😅

[@websquadron]

It happens automatically as the previous section has no more scroll thus it just goes up.

[@martones]

I have the same question. I want the next section to push the 'sticky' one up when it reaches it. What's happening on your example, and also on my website, is the sticky section going under the next.@@websquadron

[@ShaheryarBari]

thanks this workss

[@bulbul_bab4492]

"I'd like a container to remain sticky up to a certain scroll distance. After reaching that distance, it should no longer be sticky. How can I achieve this?"

[@websquadron]

Let's say you have 2 columns. Column 1 has 1000 words as text. And Column 2 has an image. You want C2 to be sticky but only for the first 500 words. Spit the section or container into 2. Section 1 = 2 columns. S1-C1 = 500 words. S1-C2 = Image in sticky column. Section 2 =. 2 columns. S2-C1 = Other 500 words. S2-C2 = Blank or add another image.

[@trevortoolson4025]

So this is pro version only right?

[@websquadron]

Yes

[@wompaper]

wtf no "Inner section" in my elementor?

[@websquadron]

Add containers inside containers.

[@TubeGuyStories]

Hey are you from Pakistan?

[@websquadron]

My parents are from there.

[@nixsondsouza9442]

In my case its not working :(

[@websquadron]

This is a weird one as it always works for me.

[@User9482-z2s]

Why do you have a tutorial on pretty much everything i can imagine? :)

[@websquadron]

Most of the time it's because someone else asked, or I found a solution for a problem I had :)

[@youtube_zeyno]

Stay in coulmn

[@NomanQureshi-n2f]

You are creating Section and then make it sticky by adding the column data in it. It's not related to make Column Sticky.

[@websquadron]

Well it’s still a stay in column function,

[@NomanQureshi-n2f]

@@websquadron But if we have multiple inner sections in our column they overlap each other when we scroll at the end.

[@Mie1115]

Hi,I want to make the video background sticky whilst scrolling,may I ask how to make it?

[@websquadron]

Set the Background Style to be Scroll.