Question

这是example。向下滚动时，导航栏会变为动画。当您向后滚动到顶部时，它应该是动画回来的。不幸的是，这种情况发生在非常缓慢。这可能与你每次滚动的事实有关，必须检查和计算坐标。

换句话说，我正在寻找一种方法来提高这个代码段的效率：

$(window).scroll(function(){
    var supra = $("div#supra-top-wrap"),
        topWrap = supra.children("div#top-wrap"),
        subNav = supra.children("nav#sub-nav");

    if ($(window).scrollTop() > 0){
        topWrap.animate({"top":"-38px"}, 400);
        subNav.animate({"top":"-70px"}, 400);
    }
    else {
        topWrap.animate({"top":"0"}, 400, function() {
            subNav.animate({"top":"0"}, 400);
        });
    }
});

哦，这是一个Fiddle来帮助您。

Answer 1

我认为这是一个简单的动画排队的情况，因此它们只能在之前的动画完成后执行，所以在大约400ms之后。尝试添加stop（），如下所示：

topWrap.stop().animate(...)
subNav.stop().animate(...)

这应该可以停止任何正在运行的动画并立即启动新动画。

Answer 2

我已经尝试了其他的东西 - 这有助于动画更快地做出反应，但仍然没有像.stop（）@ EvidentAgenda那样有效。我已经比较了动画字符串并检查它是否相同/如果没有，那么我们就会触发动画

var tt = {'top': 0}; // Animation string
$(window).scroll(function(){
  var scroll = $(window).scrollTop();
  if(scroll > h) { var tt2 = {'top': 0}; }
  else { var tt2 = {'top': FHh*-1}; }
  //FHh is global var that is Div's height
  if(tt2 != tt) {
    $('#fixedHeader').stop().animate(tt2, 150);
    // can use together with .stop() - which even more faster
    tt = tt2;
  }
});

动画在$（窗口）.scroll上的反应时间很慢

2 个答案: