0

小さなjqueryスクリプトを作成します。ページをスクロールして350を超えたとき。ボタンよりも表示されます。戻ると、ボタンは非表示になっています。これはスクリプトです：

var button = $('a[title*="terug naar boven"]');

$(document).bind('scroll', function(e) {
    if (window.scrollY > 350) {
        button.animate ({
            opacity: 1
        })
    }
    if (window.scrollY < 350) {
        button.animate ({
            opacity: 0
        })
    }
});

しかし、問題はです。スクリプトの継承はです。スクロールすると。スクリプトは毎回起動されます。どうすればこれを修正できますか？つまり、スクリプトは1回だけ起動されます。

4

1 に答える 1

0

ボタンがすでに正しい状態（表示または非表示）になっている場合にボタンがアニメーション化されないようにするには、ボタンの状態を維持する必要があります。

これを行うには変数を使用できます

var buttonState = 0;
$(document).bind('scroll', function(e) {
    if (window.scrollY > 350 && buttonState == 0) {
        buttonState = 1;
        button.animate ({
            opacity: 1
        })
    }
    if (window.scrollY < 350 && buttonState == 1) {
        buttonState = 0;
        button.animate ({
            opacity: 0
        })
    }
});

または、ボタンの不透明度レベルを状態として使用することもできます

これを1回だけ実行する場合は、イベントのハンドラーのバインドを解除できます

$(document).bind('scroll', function(e) {
    if (window.scrollY > 350) {
        button.animate ({
            opacity: 1
        })
    }
    if (window.scrollY < 350) {
        button.animate ({
            opacity: 0
        })
    }
    $(document).unbind('scroll');
});
于 2012-12-28T10:00:49.300 に答える