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 回答