Make right sticky card disappear when it's close to the bottom
Hi everyone, hope you're doing fine! 🙂
I'm struggling in finding a way to make what the title said. I have a container with two columns where I have in the right column a sticky card that I want to disappear before it touches the bottom edge of its wrapper (I put a border around it, so you can see better what I mean.
Here's the codepen for a small demo: https://codepen.io/fracav99/pen/QWejpqE?editors=1100
I'm working on an Angular project and I tried different ways, one using a div to observe with intersection observer (but since inside a @if statement in the template, I'm not able to query it from my component and using viewchild gives me always undefined, even after using afterViewInit hook). So I decided to go with a pure vanilla js solution for this but I cannot came up with a solution using coordinates or elements clientHeight, offsetHeight, etc...
Thanks in advance for your time and I'd like to know how you came up with the solution 🙂
5 Replies
Have you tried giving it (the sticky element) a margin-bottom?
Hi @FryBlaster,
If I don't misunderstood anything, I think this could help with it: https://codepen.io/eloy1991/pen/rNXmNKm
@stillmorris yes, exactly like that, I wrote left instead of right in the title ahah. Anyway, good job and thanks!
What if I want it to disappear before it touches the very bottom, like 10px or Xpxs before?
I think so. Let me try it.
Hey @FryBlaster !
I think it's working fine now.
@stillmorris thanks a lot! Also thanks for the useful comments!