0

我正在开发一个超级简单的网站（或者我认为是这样），并且我正在尝试使用 JQuery 的 ScrollTop 作为顶部导航栏。我遇到了一个问题。

所以当我向下滚动，超过 50 时，一切正常。导航栏缩小，一切都像它应该的那样。但是..问题是当我向上滚动到顶部时。我有一个 else 语句，如果滚动位置小于 50，它应该动画回到原来的尺寸。它确实这样做了，但是在滚动到顶部后它有 10 秒（ish）的延迟。我无法弄清楚可能出了什么问题。

这是我的 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 与它集成。

4

1 回答 1

1

当您滚动时，jquery 会多次触发事件，每次触发 jquery 需要 530 毫秒才能完成动画，因此如果您向下滚动 10 次，它将使用 5.3 秒，再向上滚动 10 次，再用 5.3 秒完成您应该实现的所有动画一个 lock ，所以动画只在 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);
        }
    }
  });

注意：我实际上并没有运行此代码

于 2013-07-07T05:48:07.833 回答