Scroll a sidebar with viewport but pin to top or bottom

[Ambient.Impact]

Hi there. I've been looking at the ScrollTrigger plug-in to solve a UX problem but can't seem to get it working. I essentially want a sidebar, when taller than the viewport, to scroll along with the page both up and down, until its bottom edge comes up and hits the bottom edge of the viewport which then causes it to behave as fixed. The same should happen when you scroll upwards and the top of the sidebar comes down and hits the top edge of the viewport.

 

Here's a crude diagram that might help visualize things. The content column is red, the sidebar yellow, and the viewport is black. In this case it's scrolling downwards, so just reverse it (or flip it upside down?) for scrolling upwards.

 

 

In the attached pen, I'm only attempting this with the left (first) sidebar.

See the Pen ZExGVxM by ambient-impact (@ambient-impact) on CodePen

[akapowl]

Welcome to the GSAP forum!

 

I'm not sure I fully understand the exact behaviour you are aiming for, but this sounds a lot like what was handled in this older thread.

 

 

 

 

Here's a direct link to the helper function crafted by @GreenSock, posted within that thread. I hope that will help. Happy tweening!

 

[Ambient.Impact]

Oh wow, that looks like what I'm trying to achieve. Will have to give the solutions a try. Thanks!