SWALKER Posted October 17, 2022 Share Posted October 17, 2022 I feel bad for asking such a basic question but I can't seem to work it out. I am trying to pin a section when the top gets to the top of the screen for the rest of the scroll down and then when they scroll back up, it unpins when the bottom of the element above, comes back into the viewport. Essentially the top level navigation scrolls as normal but the second level navigation sticks, then unsticks when you scroll back up revealing the to level navigation again. I have tried so many things, various scroll triggers, onleave, onenter, toggle actions but it only ever pins until you scroll the height of the element and then unpins or just doesn't work at all. I also tried setting the end trigger as the bottom of the page wrapper but that didn't work, though I do understand why. I feel like this must be a really common need but I can't seem to find any examples. Any advice, or a point in the right direction would be much appreciated Thanks Sheree UPDATE*** After days of trying literally just after I posted this I found another solution that works! gsap.to(".ast-main-header-wrap", { scrollTrigger: { trigger: ".ast-main-header-wrap", markers: true, start: "top top", end: 99999, toggleClass: {className: 'main-tool-bar-scrolled', targets: '.ast-main-header-wrap'} }, }); ANOTHER UPDATE! Sorry for al the updates but I got it working like so: gsap.to(".ast-main-header-wrap", { scrollTrigger: { trigger: ".ast-main-header-wrap", markers: true, start: "top top", endTrigger: ".footer-row-2", end: "bottom -1px", toggleClass: {className: 'main-tool-bar-scrolled', targets: '.ast-main-header-wrap, .ast-above-header'} }, }); I have edited my codepen so you can see I have no doubt there are slicker ways to do it so by all means, let me know, but this is working Thanks! See the Pen yLjrbRK by shereewalker (@shereewalker) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted October 17, 2022 Share Posted October 17, 2022 Why not add an element underneath it all (like a footer) and have that be the end trigger? I've set the endTrigger to be the footer element and have set the end property to the top of the footer element and the trigger point to be the bottom of the browser, so as soon as the bottom of the browser hits the top of the footer element it un pins. You could do something fancy where the pinned element gets animated away, by converting your gsap tween to a timeline and right before the end animate it way or watch for the onLeave event (see the docs) and do an animation there. See the Pen zYjXzWY?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen 2 Link to comment Share on other sites More sharing options...
SWALKER Posted October 17, 2022 Author Share Posted October 17, 2022 Hi @mvaneijgen Thanks so much for your reply - In the end this is actually what I did, but so it doesn't disappear at the bottom, I set the end point as bottom -1px for the footer which it never reaches as it's the end of the page Thanks! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now