javascript - Jquery - ScrollTop 延迟..很多

Question

我正在开发一个 super 简单的网站(或者我是这么想的)，我正在尝试使用 JQuery 的 ScrollTop 作为顶部导航栏。我遇到了一个问题。

所以当我向下滚动，超过 50 时，一切正常。导航栏缩小，一切都像它应该的那样。但是.. 问题是当我向上滚动到顶部时。我有一个 else 声明，如果滚动位置小于 50，它应该动画回到原来的尺寸。它确实这样做了，但在滚动到顶部后有 10 秒(左右)的延迟。我不知道哪里出了问题。

这是我的 JQuery 代码:

$(window).scroll(function(){
          if ($(this).scrollTop() > 50) {
              $('.co_name').animate({ fontSize: '22pt', paddingTop: '18px', paddingBottom: '0px'}, 530);
          }  else {
            $('.co_name').animate({ fontSize: '40pt', paddingTop: '80px', paddingBottom: '75px'}, 530);
          }
      }); 

我没有发现任何问题，但这又是我第一次使用 ScrollTop...您可以在 studionice.co/u/flatresponsive 看到整个网站正在运行.

有什么想法吗？

此外，有时向下滚动时原始动画会延迟。我过去使用过 JQuery，它通常非常快。这可能是我源代码中的所有垃圾吗？我正在四处乱逛，目前集成了 Font Awesome、Bootstrap 和 Flat UI。

Answer 1

当你滚动时，jquery 会多次触发该事件 每次它触发 jquery 需要 530 毫秒来完成动画 因此，如果您向下滚动 10 次，它将使用 5.3 秒，然后再向上滚动 10 次，又需要 5.3 秒来完成所有动画 你应该实现一个锁，所以当 scrollTop() > 50 时动画只发生一次 并且只有一次当 scrollTop() <= 50 像这样:

var animateLock = 0;
$(window).scroll(function(){
    if ($(this).scrollTop() > 50) {
        if (animateLock == 0) {
            animateLock = 1;
            $('.co_name').animate({ fontSize: '22pt', paddingTop: '18px', paddingBottom:'0px'}, 530);
        }
    }  else {
        if (animateLock == 1) {
            animateLock = 0;
            $('.co_name').animate({ fontSize: '40pt', paddingTop: '80px', paddingBottom: '75px'}, 530);
        }
    }
  });

注意:我实际上并没有运行这段代码