0

私はjQueryが初めてなので、ある程度の基礎を築いていると思いますが、次のコードに問題があります:

$(window).scroll(function(){
    var $header = $('#header');
    var $st = $(this).scrollTop();
    console.log($st);

    if ($st < 250) {
        console.log($st);
        $header.height(300 - $st);
    } else {
        $header.hover(function(){
            $(this).height(300);
        }, function (){
            $(this).height(50);
        });
    }
}).scroll();

http://jsfiddle.net/J4rsj/

「ヘッダー」はスクロールすると縮小し、ホバーすると拡大および縮小しますが、バグが見つかりました。ページの読み込み時には発生しませんが、ページを下にスクロールして再びトップに戻ると、(ホバー時に) ヘッダーのサイズが .height(50) に縮小されます() は 250 を超えています。

scrollTop() の値をログに記録して、それが累積する数値ではないことを確認し、これを行うさまざまな方法を試しましたが、それを機能させたり、問題を理解したりすることはできません。最終的には、ホバー効果をアニメートしてぎこちなくしたいのですが、それはまた別の機会に。

どんな助けでも本当に感謝します!

4

3 に答える 3

0

これを試して：

実施例

$(window).scroll(function () {
    var $header = $('#header');
    var $st = $(this).scrollTop();
    if ($st < 250) {
        $header.height(300 - $st);
        $header.off(); // remove all events from #header
    } else {
        $header.on({ // on mouseenter & mouseleave, note: .on({hover: doesn't seem to work
            mouseenter: function () {
                $(this).height(300);
            },
            mouseleave: function () {
                $(this).height(50);
            }
        });
    }
});

.on()および.off( )のドキュメント

次のようにイベントを指定して .off() を使用することもできます$header.off('mouseleave');。特定のイベントを削除し、他のイベントをそのままにしておく必要がある場合。

于 2013-09-11T22:59:21.453 に答える