Jump to content
Search Community

Unpin on reverse scroll

SWALKER test
Moderator Tag

Recommended Posts

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

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

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