gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 18:24:26 27 4
gpt4 key购买 nike

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

出现部分使用 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 提供的图像平滑收缩功能。

专家们有什么建议吗?

最佳答案

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

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

关于jquery - 滚动回网页顶部时触发功能的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16145267/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com