1

次の例では、scrollTop の値を取得し、期待どおりに css を調整します。

      $(window).scroll(function() {
      if($window.scrollTop()>918){
        $menu.css({top:'0px'});
        }
      else{
        $menu.css({top:'80px'});
        }
      }

しかし、次の（はるかに優れた効果）はそうではありません。スクロールイベントが終了すると、一見断続的に発生します

       $(window).scroll(function() {
       if($window.scrollTop()>918){
        $menu.animate({top:'0px'},100);
        }
      else{
        $menu.animate({top:'80px'},100);
        }
        }

誰でも理由はありますか？とてもシンプルですが、私を精神的に駆り立てます。確かに私は何かが欠けています、どんな助けも大歓迎です

4

1 に答える 1

4

ユーザーがスクロールバーを動かしている間にスクロールイベントが何度も発生し、発生するたびに新しいアニメーションが開始されるため、メニューを移動しようとするアニメーションが同時に実行されることになります。違う。

次のように前のアニメーションを停止するとうまくいくかもしれません:

$(window).scroll(function() {
    if($window.scrollTop()>918){
        $menu.stop(true).animate({top:'0px'},100);
    } else {
        $menu.stop(true).animate({top:'80px'},100);
    }
}

ただし、スクロール操作が完了するのを待ってからアニメーションを実行すると、さらにうまくいくでしょう。スクロールが完了するまで待機する jQuery アドイン メソッドについては、この投稿を参照してください。

編集：さらに良いアイデアがありました。最初のスクロール移動でアニメーションを開始し、値が変更されない限りそのまま続行します。

$(window).scroll(function() {
    var menuTarget = $window.scrollTop()>918 ? "0px": "80px";
    // only do an animation if one isn't already going or
    // the current animation target is not what we want
    if (!$menu.is(":animated") || $menu.data("animTarget") !== menuTarget) {
        // set the new target, stop the current animation and start new animation
        $menu.data("animTarget", menuTarget)
            .stop(true).animate({top: menuTarget},100);
    }
}
于 2012-10-18T13:28:15.293 に答える