Javascript Velocity.js-停止动画回调

我有以下代码：

$(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个像素，那个么动画就应该开始了，而且效果很好

有一件事我刚刚注意到，它困扰着我——每次我滚动时，velocity动画都会检查scrollTop，所以当我滚动时，整个动画并不平滑，因为在触发动画之前，功能是检查scroll

有没有别的办法使它顺利

例如：

---

你应该限制你与一些像本·阿尔曼这样的图书馆的支票：

检查此文档页：

例如，您可以这样使用它：

$(window).scroll($.throttle(250, checkTop));

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

---

您更喜欢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可以完成繁重的工作，而类切换对性能的影响可以忽略不计。

---

碰巧有一个最小的示例，我们可以用来查看性能？下面是一个示例：在触发动画时尝试滚动（很多）这是完全错误的unnecessary@ZachSaucier我不这么认为：请看我对你答案的评论。但我同意这个小插件可以手写，因为这很简单！顺便说一句，看看文档页面，这很有启发性！你不能链接到废弃的图书馆吗？上一次更新是在2010年3月7日，我以为这是针对velocity.js的，你们只是在使用jQuery的scrollTo，而不是我在文档中读到的velocity.js。别忘了限制你的

scroll

处理程序（例如，来自John Resig-jQuery的创建者），这将再次带来更好的性能@Samuelcailerie检查了文章的日期，虽然我同意您应该限制滚动处理程序，但在这种特殊情况下，它是不需要的，CSS处理动画而不是JSI不同意的，因为：1。您可以调用许多jQuery对象（顺便说一句，您应该缓存

$（this）

和

$（“.header”）

）2。回调中有一些不可忽略的处理（除了CSS部分之外，它是纯js）3。还有一些用户使用旧电脑/网络浏览器/。。。谁也需要这种优化（尽管这篇文章有点旧，但它总是最新的！！！@SamuelCaillerie缓存选择器我忘了，我现在编辑它，为建议喝彩。我现在将优化代码。