随着页面滚动改变translateY的值

一个面试题:
假设某个div的css为 .selector{transform:translateY(-500px)}
现在随着页面的滚动(自上而下),将-500逐渐变成0.变成0的过程中,停止滚动,则数值停止变化.

想了想,如果用$(".selector").css({"transform":"translateY("+($(window).scrollTop()-500)+"px)"});会出现超过0的值.

不知道大家有更好的方法没?

 $(".selector").css({"transform":"translateY("+($(window).scrollTop()-500)+"px)"});
 改成
 $(".selector").css({"transform":"translateY("+($(window).scrollTop()-500>0?0:$(window).scrollTop()-500)+"px)"});

应该是小于0吧。。超过0.。

 $(".selector").css({"transform":"translateY("+Math.max(0,$(window).scrollTop()-500)+"px)"});

这个就是个比例问题啊，跟-500px不搭。
滚动到底，translateY正好为0.
那么$(document).height()-$(window).height() 为滚动条可以滚动的距离（根据不同浏览器，得到的值有的是数字N有的是N px，这点要注意一下）
$(window).scrollTop()为滚动了的距离,
$(window).scrollTop()/($(document).height()-$(window).height() )*500
就是div translateY的等比需要滚动值。由于div是负数，所以
$(window).scrollTop()/($(document).height()-$(window).height() )*500-500
就是div 的 translateY值