ScrollTrigger how to 'stack' pinned sections

[cotton]

Hello

 

I'm looking for a solution to allow me to pin the vertical bar svg to the top of the page when the .header_wrapper it is inside hits the top of the window. The markers show the function works but it doesn't seem to be taking into account the +=3500 end/pinSpacing of the 'intro' scroll so pins it too early.

 

I'm currently trying to use a pin to stick the header to the bottom on load and have the end the same as the intro part but then once this is complete it jumps 3500px down.

 

Essentially, I'm trying to stick the header to the bottom until the intro section has been scrolled through, then the content and header will scroll up until the header bar hits the top of the screen and then the menu icon will stick in place.

 

I'm sure there is a simple solution or logic that I just need to get my head around but any guidance would be much appreciated.

 

Thanks

James

See the Pen RwVomrW by Cottonltd (@Cottonltd) on CodePen

[Cassie]

Hey there @cottoncreative!

Maybe you could nest the header inside the first section so that it moves up when that section gets unpinned, then pin it as it hits the top?

See the Pen qBmqeVy?editors=1010 by svganimationworkshop (@svganimationworkshop) on CodePen

The issue with this is that as it's within an element that gets pinned by another ScrollTrigger - the start and end positions get a little wonky. But if you set pinnedContainer to the parent element ScrollTrigger calculates those offsets for you.

I also used pinReparent to 'reparent' the header to the body when it's pinned.

I hope this helps. Not sure if it's the *best* solution - but it's a solution!

[cotton]

@Cassie this is brilliant, thank you.

 

I'm struggling to get it to work on the full site though, the header marker still sits at the top of the header elem on page load (not taking into account the size of the brand__panel). I've tried stripping everything out apart from what's in the Pen too but no luck.

 

Could I confirm these are the changes you made:

– Moved whole <header> inside the .brand__panel div

– Added .last to an element

– updated the header__wrapper scrollTrigger

– Added position: absolute and bottom: 0 to the header_wrapper

 

Did I miss anything?

 

 

[cotton]

Managed to get it working by using the trigger as the brand__panel and start: at 'bottom +size-of-header'.

 

Thanks again @Cassie!

[Cassie]

Ah fab!

 

Glad you got it working!