Question

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

使用jQuery的scroll（）和animate（），显示部分非常简单。

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

但是，当访问者滚动回到顶部时，让我感到困惑的部分就是撤消更改，以便导航栏重新混合回网页。

我添加了一个位置功能，它看起来效果很好......但是... img resizing在返回顶部时会延迟，有时会延迟一两分钟。边框和填充更改在返回顶部后立即生效，只有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（）它可以正常工作，但是我失去了动画提供的图像的平滑缩小。

那里有专家的建议吗？

Answer 1

尝试在animate函数后面添加.stop（）

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

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

1 个答案: