I have been trying to make a container get fixed when it reaches the top of the screen.
(I use itself as the target... is that bad?)
Anyways after it reaches the top I set it to pinned indefinitely until the user scrolls back down.
This is done with Duration of 0.
Then inside this pinned div I have a div with an image and I want to make the image close, with height: 0;
It works but the pinned holder does not resize and so the box holding the items is too big and the page looks weird with a blanks spot after the pinned item.
Here is what i am trying to do.
Also notice the hidden div which has same settings as the first has a weird jump and the image doesn't disappear nicely?
I recently tackled something like this for my own website. I'm pinning the article title, which before pinning includes a lot of subsidiary information like the data, the author, and social links. After pinning, I wanted to reduce the font-size of the title, and remove the author and date and shorten things up. I ran into this exact problem. There was a lot of space left over in the container after pinning.
I eventually stopped using set pin and ran my own JS code for on enter and on leave. You can then tackle this problem by toggling CSS classes for animation or other libraries like GSAP to accomplish what you want.
I may not have the exact events and methods tagged above. Been a while!