Calculating Distance from One Element to Another Using JS

Calculating Distance from One Element to Another Using JS

I have an element that is at the bottom of a web page. After the page
loads I would like the element to float to the top of the page but stop
before it goes off of the webpage.
I can achieve this by using the following CSS:
@keyframes UpBig {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-2000px);
}
}
/* Additional CSS to control speed, etc. */
The problem is I have to calculate translateY( /* NUMBER OF PX */ );. Is
there a way, using jQuery, that I can calculate the distance between the
element and top of the page and insert it into the CSS dynamically?
For instance, page 1 would have a transform: translateY(-2000px); while
page 2 (a much longer page) would have transform: translateY(-8000px);.
These numbers would be calculated and inserted using JS.