Jump to content
Search Community

ScrollTrigger how to 'stack' pinned sections

cotton test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts



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.




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

Link to comment
Share on other sites

  • Solution

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!

  • Like 2
Link to comment
Share on other sites

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



Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...