1

訪問者がスクロールを開始した後に「表示」される固定位置のトップ ナビゲーション バーに取り組んでいます。(背景の変更、ロゴのサイズ変更、および境界線のように表示されるため、Web ページの残りの部分から分離して表示されます。ナビゲーション リンク自体は、ページの上部に既に表示されています)。

表示部分は、jQuery の scroll() と animate() を使用すると非常に簡単です。

 $(window).scroll(function(){
     $('.logo img').animate({"height": "65px"}, 500);
     $('#header').css({"border": "1px solid #999", "padding-top": "1px"});
 });

しかし、私を悩ませているのは、訪問者がスクロールして一番上に戻ったときに変更を元に戻すことです。これにより、ナビゲーション バーが Web ページに溶け込みます。

かなりうまく機能しているように見える位置関数を追加しました...しかし...トップに戻ると、imgのサイズ変更が1〜2分遅れることがあります。ボーダーとパディングの変更は、トップに戻るとすぐに有効になり、img のサイズ変更のみが遅延されます。

 $(window).scroll(function(){
     if ($(this).scrollTop()>0) {
          $('.logo img').animate({"height": "65px"}, 300);
          $('#header').css({"border": "1px solid #999", "padding-top": "1px"});
     } else {
          $('.logo img').animate({"height": "114px"}, 300);
          $('#header').css({"border": "1px solid #fff", "padding-top": "8px"})
     }
 });

両方の img 関数を css() に変更すると機能しますが、アニメーションが提供する画像のスムーズな縮小が失われます。

専門家からの提案はありますか？

4

1 に答える 1

1

animate 関数の後ろに .stop() を追加してみてください

$('.logo img').stop().animate({"height": "65px"}, 300);
于 2013-04-22T10:52:00.040 に答える