我有一个jQuery动画函数设置,当文档滚动超过50px时,可以更改.header-wrap
文本的字体大小。这有效,但我不太热衷于我拥有的解决方案,它不是很流畅,理想情况下,我希望字体大小在您向下滚动页面时平滑变化,而不必停止滚动重新启动动画等。只是有点参差不齐。
js小提琴演示:http://jsfiddle.net/cXxDW/
.HTML:
<div class="content-wrap"></div>
<div class="header-wrap">hello
<br/>hello
<br/>hello
<br/>
</div>
j查询:
$(document).scroll(function () {
if (window.scrollY > 50) {
$(".header-wrap").stop().animate({
fontSize: '17px'
});
} else {
$(".header-wrap").stop().animate({
fontSize: '25px'
});
}
});
任何建议/更好,更流畅的解决方案都非常受欢迎,非常感谢!
你不会得到一个非常流畅的fontSize
动画。但是,如果您只需要与现代浏览器兼容,则可以改为zoom
动画。
您必须固定边距和位置,因为它们也将是动画的。
这是一个概念验证小提琴。