Question

我正在开发一个超级简单的网站（或者我认为），我正在尝试使用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。

Answer 1

滚动时，jquery会多次触发事件每次触发jquery需要530毫秒才能完成动画因此，如果你向下滚动10次，它将使用5.3秒，再向上滚动10次，再过5.3秒，以完成所有动画你应该实现一个锁，所以当scrollTop（）＆gt;时，动画只会发生一次。 50 当scrollTop（）＆lt; = 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);
        }
    }
  });

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

Jquery - ScrollTop推迟了很多

1 个答案: