2 longxiaokun29 LongXiaoKun29 于 2015.07.02 23:28 提问

随着页面滚动改变translateY的值 50C

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

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

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

3个回答

danielinbiti
danielinbiti   Ds   Rxr 2015.07.02 23:39
 $(".selector").css({"transform":"translateY("+($(window).scrollTop()-500)+"px)"});
 改成
 $(".selector").css({"transform":"translateY("+($(window).scrollTop()-500>0?0:$(window).scrollTop()-500)+"px)"});
LongXiaoKun29
LongXiaoKun29 这个用滚轮滚动的话,会有一个从大于0的某个值变为0的"弹动".
2 年多之前 回复
showbo
showbo   Ds   Rxr 2015.07.03 09:13

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

 $(".selector").css({"transform":"translateY("+Math.max(0,$(window).scrollTop()-500)+"px)"});
LongXiaoKun29
LongXiaoKun29 而且你这段代码 貌似是直接就跳到0了,题目是逐渐变为0.
2 年多之前 回复
LongXiaoKun29
LongXiaoKun29 是大于0. 本身就是从-500开始的.
2 年多之前 回复
yukon12345
yukon12345   2015.07.04 20:40

这个就是个比例问题啊,跟-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值

Csdn user default icon
上传中...
上传图片
插入图片