Is there a way to change the y-position of a sticky element while and after scrolling?
(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!
