1

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

使用 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() 它可以工作，但是我失去了动画提供的图像的平滑收缩。

那里的专家有什么建议吗？

4

1 回答 1

1

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

$('.logo img').stop().animate({"height": "65px"}, 300);
于 2013-04-22T10:52:00.040 回答