ScrollTrigger: Possible to stick to bottom of viewport untill it's ghost appears? (like simulating position sticky?)

[tomekk]

Hi there,

first of all thank you so much for having gsap and all the plugins to use!! Especially the scrollTrigger Plugin! Thanks for all that work.

I am totally new to the forum, this is my first post, so hopefully i am doing everything right. If not, please let me know :).

I am thinking of a case where i do have some content. After that something like a pre-footer-section (like a second navigation) and the footer itself will follow (see the codepen i provided).
The pre-footer-section should stay sticky until its ghost appears and should then scroll up with the rest (like position sticky does).
Is it possible to get that done with scrollTrigger? (i could use position: sticky, it would be perfect for this szenario, but if you need IE11 it will break...).
 

Thank you in advance for your help,
tomekk

See the Pen VwejxGQ by tomsquared_tomekk (@tomsquared_tomekk) on CodePen

[GreenSock]

Are you talking about something like this?: 

See the Pen 82070005286079c3cae60f5a2dee26b8?editors=0010 by GreenSock (@GreenSock) on CodePen

[tomekk]

Hi jack, thank you so much for your reply.

 

Yes its close to what i meant. In detail what i am trying to do is the same as what "position: sticky" does.
In your example the sticky-container is overlapping the content before itself, when it reaches the position before the footer. I thought maybe theres a way with scrollTrigger, that it will preserve the space where the sticky-container will be without "position: fixed"... (and recalculate that in smaller screensizes). Do you understand what i mean?

Heres an codepen/example with "position: sticky" and without gsap:

See the Pen GRoqaQb by tomsquared_tomekk (@tomsquared_tomekk) on CodePen

 

Is this posibble with scrollTrigger without realculating the space manually for the sticky-container that gets "position: fixed"?

[GreenSock]

Oh sure, if I understand you correctly you could just adjust the paddingBottom of your main container accordingly. Putting it in an onRefreshInit callback ensures it gets evaluated whenever there's a resize and the results will get factored into the positioning of the ScrollTrigger. I adjusted the codepen from earlier: 

See the Pen 82070005286079c3cae60f5a2dee26b8?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Is that the behavior you want? 

[tomekk]

Hi Jack

 

yes, thats exactly what i am trying to get solved. Thank you so much for your well explained answer.
And also its really great, how fast you guys reply!