Elementor - Making Columns Sticky whilst Scrolling

When you have multiple columns, and one that has far more column than the other, maybe you want the user to still see a column on the screen whilst scrolling.
Easy stuff!
- Get Elementor Pro here --- trk.elementor....
-- Of course, we're affiliated to them, but it helps to pay for resources to keep creating ace content for you :)
-- Book an Appointment/Consultation: calendly.com/i...
-- LinkedIn: / imran-siddiq-7320a74a
-- Instagram: / batswebsitedesign
-- Twitter: / imranwebsites
-- Facebook: / websquadrontraining
PS: websquadron.co.uk
PPS: Contact us at [e-mail]
PPPS: We only build with Elementor Pro
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

[@ilianasam6814]

THANK YOU FOR EXISTING!!! 🤩[ LOVE, LOVE, LOVE your straightforward tutorials!!! Keep Going!!!!🌟

[@websquadron]

Thank you! Will do!

[@RaffetAli2006]

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

[@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!

[@hohen_heim]

A great solution, thanks!

[@tomedwardsmusic]

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

[@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

[@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

[@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?

[@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!

[@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

[@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

[@obgutierrez]

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

[@abhisheksingh9580]

Thank you! 🤩❤

[@websquadron]

No problem

[@simplemortal5068]

thank you for sharing !!! genius :D

[@websquadron]

No worries!

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

[@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

[@KevsGuide]

Does it work on the free version?

[@websquadron]

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

[@barakulichova]

Thanks!

[@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

[@user-wc9qh1sm6r]

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

[@ShafenBadar]

Enable Stay in Column That makes more sense

[@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!

[@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

[@user-vp1zq7sf6o]

thanks this workss

[@KarlaOviedo]

Thank you!

[@websquadron]

You're welcome!

[@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

[@teoroven6347]

Is it only on elemntor pro?

[@FXMachinima]

Great man thank you!

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

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

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

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

[@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

[@Mohamed-Ahmaid]

Is possible to apply this method on sidebar menu?

[@websquadron]

Yes if you add the inner section.

[@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?

[@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 :)

[@arshadkhansagi]

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

[@websquadron]

I don't use WPBakery :)

[@truthhere4412]

Hey are you from Pakistan?

[@websquadron]

My parents are from there.

[@DarrenTess]

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

[@websquadron]

Never works well on the mobile

[@orelhassid]

Enable "Stay in column" instead of z-index

[@trevortoolson4025]

So this is pro version only right?

[@websquadron]

Yes

[@youtube_zeyno]

Stay in coulmn

[@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 :)

[@user-pb6tn1ji6w]

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,

[@user-pb6tn1ji6w]

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

[@Power-Down]

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

[@websquadron]

Sorry, no.