1

小さな jQuery 関数を書いていますが、問題が発生しているようです。

私がここでやろうとしているのは、ユーザーがページを 90 ピクセル下にスクロールすると、div タグが下にアニメーション化され (top:-50px から top:0 に)、ページの上部に戻るとその逆になります。 .

私が抱えている問題は、アニメーションが非常に遅く、時々反応しないように見えることです. 3 つの異なるブラウザーと異なるコンピューターでテストしましたが、満足していません。

これが私のコードです：

    // Show div
    var scrollValue = "90";

    // Animate functions
    var showHead = function (){
$(".element").animate({top: "0"}, 250);
}
var hideHead = function (){
$(".element").animate({top: "-50px"}, 250);
}

    $(window).scroll(function() {
        if ($(this).scrollTop() > scrollValue) {
            showHead();
        } else {
            hideHead();
        }
    });

.element プロパティ:

.element { positoin:fixed; top:-50px; }

私のコードの hide/showHead 機能がずさんな理由を誰かが理解できますか?

ありがとう、

ピーター

4

5 に答える 5

1

これを試してください：

$(window).scroll(function() {
    if (window.scrollY > scrollValue) {
        showHead();
    } else {
        hideHead();
    }
});
于 2013-02-18T21:42:17.453 に答える
1

scrollユーザーのスクロール中にイベントが何度も発生しました。

アニメーションを再開する前に、アニメーションが進行中かどうかを確認する必要があります。

これを試して ：

// Show div
var scrollValue = "90";
var inProgress = false;

// Animate functions
var showHead = function () {
    if(inProgress)
        return false;

    //Animate only if the animation is not in progress
    inProgress = true;

    $(".element").animate({
        top: "0"
    },250,function(){
        inProgress = false; //Reset when animation is done
    });
}
var hideHead = function () {
    if(inProgress)
        return false;

    //Animate only if the animation is not in progress
    inProgress = true;

    $(".element").animate({
        top: "-50px"
    }, 250,function(){
        inProgress = false; //Reset when animation is done
    });
}

$(window).scroll(function () {
    if ($(this).scrollTop() > scrollValue) {
        showHead();
    } else {
        hideHead();
    }
});
于 2013-02-18T21:42:49.363 に答える
1

queue: false を使用してみてください。アレクサンダーが使用したように.stop()

ここでjsfiddle

http://jsfiddle.net/hwbPz/

于 2013-02-18T21:43:02.150 に答える
1

あなたが持っていると仮定しますposition:fixed（または必要に応じてバーを表示する他の種類のスタイリング）：

var scrollheight = 90;

var $el = $('.element');
function showHead(){
    $el.stop().animate({
        top: '0px'
    }, 250);
}
function hideHead(){
    $el.stop().animate({
        top: '-50px'
    }, 250);
}

$(window).scroll(function(){
    if ($(window).scrollTop() > scrollheight){
        showHead();
    }else{
        hideHead();
    }
});

例: http://jsfiddle.net/L4LfL/

于 2013-02-18T21:45:26.410 に答える