Jquery-ScrollTop延迟.很多

Jquery - ScrollTop delayed.. a lot

本文关键字：很多 延迟 Jquery-ScrollTop      更新时间：2023-09-26

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

所以当我向下滚动，超过50时，一切都很好。导航栏缩小了，一切都应该如此。但是。。问题是当我向上滚动到顶部时。我还有一个声明，说如果滚动位置小于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/flatresponsible上看到整个网站的工作情况。

有什么想法吗？

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

滚动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);
        }
    }
  });

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

相关文章：