0

ここでやろうとしていることの単純なバージョンを再作成しました (jsFiddle)

ヘッダーはそのままの位置に留まる必要があり、下にスクロールすると、ヘッダー div をクリックすると、上にスクロールして戻ります。ただし、入力に集中するか、「ロゴ」をクリックすると、スクロールはそのままの位置に留まります。

私が試した最初の方法では、jQuery を使用し.cssて入力/ロゴz-indexをヘッダーよりも高く設定し、現在のスクロールを取得してその位置に保持します。

この種の機能は機能しますが、入力またはロゴをクリックすると、ヘッダー スクロールが機能しなくなります。

また、ロゴ/入力 jQuery を.animate低速に変更しようとしましたが、設定していなくても、数秒間静的なままになり、上部にスクロールします。これが2番目の例です - jsFiddle

ただし、2 番目の例で実行しても、他の関数の動作は停止しません。

私が見逃しているこの動作の理由はありますか?

4

3 に答える 3

1

クリック イベントがヘッダーに伝播するのを防ぐことができます。

$("#logo, #input").click(function(e) {
    e.stopPropagation();
});
于 2011-11-22T20:59:03.997 に答える
1

イベントの順序に関するこの興味深い記事を確認してください。伝播を停止するだけです。ここであなたの変更されたフィドル

$("#logo, #input").click(function(e) {
    e.stopPropagation();
    var y = window.scrollY;

    $('html').animate({
        scrollTop: y
    }, 'slow');
    $('body').animate({
        scrollTop: y
    }, 'slow');
});
于 2011-11-22T21:02:33.293 に答える
0

必要なのは、イベントの伝播を停止することだけです。これを行うには、クリック関数から false を返します。

$("#logo, #input").click(function() {
    return false;  // Add this line
});

これが更新されたフィドルです：http://jsfiddle.net/BRnvT/

于 2011-11-22T20:57:59.270 に答える