2

.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'
        });
    }
});

私が持っているものに対する提案/より良い、よりスムーズな解決策は大歓迎であり、大歓迎です!

4

1 に答える 1