ScrollTrigger: Pin Sticky Nav

[kdisney]

Hi, 

 

I'm trying to successfully pin two separate elements on the same page:

 

1. The first section (100vh) which is stacked above the rest of the page.  As I scroll I'd like it to move yPercent: -100 out of view.  The rest of the page (the other sections) I would like to act normally, no stacking, it should move as a single body. 

2.  I have a sticky nav in the middle of the page that I'm trying to pin to the top once it's in view and end at the end of the html

 

I'm working off of the `Layered Pinning From Bottom` ScrollTrigger example.  I have 1 working but I can't seem to figure out how to do 2.  Any advice or feedback would be helpful!  Thanks all

 

See the Pen WNwJZNe by kdisney (@kdisney) on CodePen

[Visual-Q]

I don't promise that this is the best setup as I haven't had much time to explore ScrollTrigger but maybe something like this:

 

See the Pen VwaEGro by Visual-Q (@Visual-Q) on CodePen