1

jquery を使用してslideDown()おり、スクロール バーの高さが を超える場合にslideUp()固定リンクを表示します。gototop200px

問題：

リンク スライド アクションが混同されていfast mouse wheel up and downます。0.4 secスライド機能の実行時間のため。混合を防ぐためにavisible flagとを定義しようとしました。complete functionsしかし、成功していません。

Jsフィドル

下にスクロールしresult blockてリンクを表示し、高速ホイールを上下に動かしてみてください。画面上で結果ブロックの高さが大きい場合は、高さを下げてアクションを確認してください。

impress: function () { 
    if ($(window).scrollTop() > this.MIN_SCROLL_HEIGHT 
        && !this.buttonVisibleFlag) 
    { 
        this.button.slideDown(400, function() {
            Blue.buttonVisibleFlag = true;
        });
    }
    else if ($(window).scrollTop() <= this.MIN_SCROLL_HEIGHT 
             && this.buttonVisibleFlag) 
    {
        this.button.slideUp(400, function() {
            Blue.buttonVisibleFlag = false;
        });
    }
}

どんなアイデアや助けも大歓迎です。

4

1 に答える 1

3

ユーザーが一定の（短い）時間スクロールを停止した後にのみ、スライドアクションを実行するのが最善の策だと思います。ユーザーがスクロールを停止してコードに実装したことを検出するこのメソッドを見つけました。結果は次のとおりです。

更新されたフィドル

var Blue = {
    MIN_SCROLL_HEIGHT: 200,
    button: null,
    buttonVisibleFlag: null,

    init: function () {
        this.button = $(".gototop");
        this.buttonVisibleFlag = false;
        this.setWindowBindings();
    },
    setWindowBindings: function () {
        $(window).scroll(function () {
            //perform actions only after the user stops scrolling
            clearTimeout($.data(this, 'scrollTimer'));
            $.data(this, 'scrollTimer', setTimeout(function () {
                Blue.impress();
            }, 150));
        });
    },
    impress: function () {
        if ($(window).scrollTop() > this.MIN_SCROLL_HEIGHT) {
            this.button.slideDown();
        } else if ($(window).scrollTop() <= this.MIN_SCROLL_HEIGHT) {
            this.button.slideUp();
        }
    }
}

$(document).ready(function () {
    Blue.init();
});

注: ニーズに合わせてタイムアウト間隔を微調整することもできます

于 2013-08-29T06:01:52.507 に答える