gpt4 book ai didi

javascript - Velocity.js - 停止动画回调

转载 作者:行者123 更新时间:2023-11-30 12:36:40 26 4
gpt4 key购买 nike

我有这个代码:

$(window).scroll(function () {
if ($(this).scrollTop() > ($animate.headline.height() + 100)) {
$animate.header.velocity({height: "50px"}, { queue: false });
} else {
$animate.header.velocity({height: "100px"}, { queue: false });
}
});

如果用户从顶部滚动 xxx 像素,则动画应该开始,并且效果很好。

我刚刚注意到的一件事让我很困扰 - 每次我滚动时,速度动画都会检查 scrollTop,因此当我滚动时整体动画并不流畅,因为在触发动画之前函数正在检查滚动。

有没有其他方法可以让它变得平滑?

例子:

http://codepen.io/anon/pen/bIkqF

最佳答案

您更喜欢 CSS 方法吗?

将标题的 css 设置为:

-webkit-transition: all 0.5s;
position:fixed;
top:0;
left:0;

为所需的高度添加一个新类:

.shrink{
height:50px;
}

然后在你的 js 中切换类:

var header = $('.header');
$(window).on('scroll', function () {
if ($(this).scrollTop() > (header.height() + 20)) {
header.addClass('shrink');
} else {
header.removeClass('shrink');
}
});

修改过渡的秒属性以获得更平滑的效果。

通过这种方式,GPU 可以完成繁重的工作,而类别切换对性能的影响可以忽略不计。<强> Demo

关于javascript - Velocity.js - 停止动画回调,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25849971/

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