Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

ScrollTrigger: Pin Sticky Nav

Recommended Posts



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

Link to post
Share on other sites

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

  • Like 2
Link to post
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.