Is there a way to change the y-position of a sticky element while and after scrolling?

[Shoobie]

(1) I'd like to have the sticky element move to the halfway point of the screen while scrolling, because before scrolling, the sticky element is in an unusual y-position. Also, when scrolling all the way down, the sticky element clashes with the footer, which does not look good. (2) I'd like to have the sticky element stop before crashing into the footer.

The sticky element is boxed in blue. This is what it looks like before scrolling.

While scrolling, the sticky element is not exactly at the y-midpoint of the screen. I want to be able to move it a bit upward so that it's centered.

After scrolling all the way down, part of the sticky element is buried underneath the footer. I want to be able to move it upward so that it doesn't crash into the footer.

Any help is appreciated. Thank you so much!

[HARSHIKA_VERMA]

Hi Shoobie,

Thank you for reaching out. I assume you're looking for the similar workflow mentioned here. If so, I would request you to please check the workaround suggested by our expert and let us know if that helps.

Thanks,

Harshika

[Spas K. · Accepted solution]

That workaround which Harshika mentioned only looks okay for elements with a smaller height and when the page is relatively tall. For something like your case I'm afraid it might not look very good. But there's no native support for sticky elements that change their fixed positioning, so that's pretty much all you can do right now.