resize height of pinned item #613

Open
saltnpixels opened this Issue Nov 1, 2016 · 2 comments

Projects

None yet

2 participants

@saltnpixels

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.

@saltnpixels

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?

scrollmagic

@markadrake

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment