Jump to content
Search Community

ScrollTrigger pinning element both top and bottom?

iammarkmulvey test
Moderator Tag

Recommended Posts

Is it possible with ScrollTrigger to assign a pin set for both top and bottom of the viewport?  So when you scroll up the element pins to the top and when you scroll down it pins to the bottom.

 

I tried starting with the elements fixed bottom on load and as soon as you started scrolling removed the sticky class and assigned the ScrollTrigger. That resulted in the elements disappearing.

See the Pen vYLGyqL by markmulvey (@markmulvey) on CodePen

Link to comment
Share on other sites

Thanks Zach for your response!

 

I am trying to make it so the "today" header and the "tomorrow" header are fixed to the bottom of the viewport regardless of the viewport height on load. When the user scrolls the "today" header would "unpin" and scroll in position above the "today" content until it reaches the top and "pins" itself just below the nav. As the user continues scrolling the "today" content will continue scrolling until we reach the bottom of the "today" content, at which point the "tomorrow" header would "unpin" and continue to scroll in position above the "tomorrow" content until it reaches the top and pins itself below the nav. Obviously would want everything to work in reverse if the user changes the scroll direction. 

 

Hopefully, that makes sense?

Link to comment
Share on other sites

Almost Jack! That is essential the effect but it's a little backwards.

 

Rather than the header divs unpinning from their initial fixed position at the bottom of the related content div they would unpin and be positioned at the top of the content div when scrolling. I tweaked it to get the result I was looking for. Obviously, a key factor is pointing to a different ScrollTrigger JS file. Is that available for me to use?

 

Thank you! Good stuff.

 

 

 

 

 

 

 

 

Link to comment
Share on other sites

I am running into a problem when viewing on a mobile device. Specifically the browser toolbar (both Safari and Chrome) at the bottom that slides in and out on scroll. Because of this the 2 headers that we wanted to appear "pinned" to the bottom "Today" and "Tomorrow" are left hanging in the original "absolute" position when the the page loads, rather than always repositioning to the bottom as desired.

 

Any thoughts on that one?  Is there a way to hide that toolbar at the bottom or something like that?  Also it's hard to replicate in the codepen example because when you view codepen on a mobile device the toolbar at the bottom stays visible and constant the entire time.  How does codepen control the toolbar in mobile view?

Link to comment
Share on other sites

4 minutes ago, iammarkmulvey said:

it's hard to replicate in the codepen example because when you view codepen on a mobile device the toolbar at the bottom stays visible and constant the entire time.

Even in debug mode? Try replacing /pen with /debug in the URL on mobile.

Link to comment
Share on other sites

Ok that makes the toolbar at the bottom in codepen function normally when viewing from my iPhone (learn something new everyday). Browser Tool bar disappears on scroll up and reappears on scroll down and you can see how the "tomorrow" header is a bit buggy and gets stuck hanging. 

 

Thanks for the quick response Zach!

Link to comment
Share on other sites

11 minutes ago, iammarkmulvey said:

Browser Tool bar disappears on scroll up and reappears on scroll down and you can see how the "tomorrow" header is a bit buggy and gets stuck hanging. 

The effect that you're talking about is when you first start scrolling the "Tomorrow" isn't at the bottom of the screen until you let go of the scroll, correct?

 

If so, that's because ScrollTrigger waits to fire its refresh until after the scroll event is done.

 

To work around that, you could fire ScrollTrigger.refresh() on the window's resize event:

See the Pen WNrRJVg?editors=0010 by GreenSock (@GreenSock) 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...