滚动回网页顶部时触发功能的问题

Question

我正在开发一个固定位置的顶部导航栏，该导航栏在访问者开始滚动后“出现”。 （在背景变化中出现，徽标调整大小和边框出现，使其看起来与网页的其余部分分开，导航链接本身已经在页面顶部可见）。

使用 jQuery 的 scroll() 和 animate() 显示部分非常简单。

 $(window).scroll(function(){
     $('.logo img').animate({"height": "65px"}, 500);
     $('#header').css({"border": "1px solid #999", "padding-top": "1px"});
 });

但难倒我的部分是当访问者滚动回顶部时撤消更改，以便导航栏重新融入网页。

我添加了一个似乎工作得很好的位置函数......但是...... img 调整大小在返回顶部时会延迟，有时会延迟一两分钟。边框和填充更改在返回顶部时立即生效，只是延迟调整 img 大小。

 $(window).scroll(function(){
     if ($(this).scrollTop()>0) {
          $('.logo img').animate({"height": "65px"}, 300);
          $('#header').css({"border": "1px solid #999", "padding-top": "1px"});
     } else {
          $('.logo img').animate({"height": "114px"}, 300);
          $('#header').css({"border": "1px solid #fff", "padding-top": "8px"})
     }
 });

如果我将两个 img 函数都更改为 css() 它可以工作，但是我失去了 animate 提供的图像的平滑收缩。

专家有什么建议吗？

Answer 1

尝试在 animate 函数后面添加 .stop()

$('.logo img').stop().animate({"height": "65px"}, 300);