Javascript 填充动画延迟

例如，当窗口向下滚动>300px时，我尝试创建固定顶部菜单，并调整它们的大小（通过改变顶部和底部的填充）。 如果我在从顶部开始300px之后尝试，则将css样式设置为

$（'nav'）.css（'padding'，'30px0'30px0'）一切正常，但如果我尝试用动画来实现这一点，我会在事件之间获得巨大的延迟

例如：
无动画-（所有工作正常）

对于animate-（巨大的延迟）
我更喜欢使用CSS转换，而不是jQuery动画

这是你可以做到的

将以下css添加到现有css文件中：

.nav.custom{
  padding-top:5px;
  padding-bottom: 5px;
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
  -ms-transition: all ease 0.5s;
  transition: all ease 0.5s;
}

使用以下脚本：

   $(document).ready(function() {
        var $nav = $('.nav');
        $(window).scroll(function () {
            if ($(this).scrollTop() > 350) {
                $nav.addClass('custom');
            } else {
                $nav.removeClass('custom');
            }
        });
    });

注意：css转换在一些旧浏览器中可能不起作用。这是一个列表，上面显示了

希望这有帮助。：）
 每次滚动调用动画时：应先检查
$nav.is（':animated'）在开始一个新的动画之前，希望这篇文章能帮助你实现@Benjamin，我不认为这样会奏效。因为只有当
scrollTop（）>350
时才会调用
toggleClass
。那么它什么时候会添加类，什么时候会删除？哇，太棒了！谢谢；）@kxc它有帮助，但请注意，您将遇到跨浏览器兼容性问题。@kxc检查此项以了解更多详细信息