1

さて、@ adeneoが以前に回答して評価したこの質問をすでに行ったようですが、これを機能させることができないため、頭がガタガタしています。

下にスクロールすると「固定」位置のヘッダー「fadeTo」0.5不透明度になり、ユーザーが上にスクロールすると完全な不透明度（「不透明度」：1.0）にフェードバックしようとしていますか？

これが私が持っているものです：

$(window).on('scroll', function() {
if ($(this).scrollTop() > 50) {
$("#header").fadeTo(400, 1);
}else{
$("#header").fadeTo(400, 0.5);

}
});

現時点では、このコードを使用すると、下にスクロールすると「fadeTo」0.5の不透明度になりますが、上にスクロールすると完全な不透明度（不透明度：1.0）にフェードバックしません。

助けてください！

4

1 に答える 1

3

問題の1つは、ユーザーがページをスクロールするたびに400ミリ秒のアニメーションを実行していることです。これにより、目に見える効果がない非常に長い効果のキューが生成されます。たとえば、イベントが発生する1たびに不透明度にアニメーション化され、フェードアウト効果が発生するまで、目に見えない効果の非常に長いキュー。scrollscrollTop > 50

.stop(true)を実行する前に使用している問題を解決する簡単な方法ですfadeTo。この方法では、指定されたアニメーションを実行する前に、要素の効果キューが常にクリアされます。

$(window).on('scroll', function() {
    if ($(this).scrollTop() > 50) {
        $("#header").stop(true).fadeTo(400, 0.5);
    } else {
        $("#header").stop(true).fadeTo(400, 1);
    }
});

フィドル

ただし、それでも不必要にアニメーションを実行することになるので.data、フェード状態を保存し、必要な場合にのみアニメーション化するために使用することをお勧めします。

$(window).on('scroll', function() {
    var header = $("#header");
    if ($(this).scrollTop() > 50) {
        if (!header.data('faded')) header.data('faded', 1).stop(true).fadeTo(400, 0.5);
    } else if (header.data('faded')) {
        header.data('faded', 0).stop(true).fadeTo(400, 1);
    }
});

フィドル

ps。質問のコードのロジックが目的の動作に対応していなかったため、不透明度の値を反転しました。

于 2012-11-07T20:45:04.827 に答える