Using GSAP to simulate position sticky on element that cannot be sticky due to parents overflow.

[RickBGove]

It's a basic issue of position: stickynot working due the parent element have overflow set. 

We would have to rewrite a huge amount of code to move the header outside of the overflow parent...

 

I have a little experience with GSAP, and I know it can do amazing things... 

 

What I need to know is if we can use GSAP to make the header sticky gracefully... Thank you...

See the Pen KKbaNyr by Richard-Gove (@Richard-Gove) on CodePen

[akapowl]

 

Welcome to the GSAP forum Rick.

 

You'll probably want to have a look at ScrollTrigger its pinning feature and all the options that come with it for something like this.

 

Then you could do something like this, e.g.

 

I hope that will help get you started.

See the Pen bGOgWZm by akapowl (@akapowl) on CodePen

 

[RickBGove]

Thank you so much! This will work for sure!