.header-wrap
ドキュメントが50pxを超えてスクロールしたときにテキストのフォントサイズを変更するjQueryアニメーション機能をセットアップしました。これは機能しますが、私が得たソリューションにはあまり熱心ではありませんが、あまりスムーズではありません。理想的には、ページのスクロールを停止するのではなく、ページを下にスクロールするときにフォントサイズをスムーズに変更したい-アニメーションなどを開始します。少しギザギザです。
jsFiddle デモ: http://jsfiddle.net/cXxDW/
HTML:
<div class="content-wrap"></div>
<div class="header-wrap">hello
<br/>hello
<br/>hello
<br/>
</div>
jQuery:
$(document).scroll(function () {
if (window.scrollY > 50) {
$(".header-wrap").stop().animate({
fontSize: '17px'
});
} else {
$(".header-wrap").stop().animate({
fontSize: '25px'
});
}
});
私が持っているものに対する提案/より良い、よりスムーズな解決策は大歓迎であり、大歓迎です!