填充动画延迟

Question

我正在尝试创建固定顶部菜单，并在窗口向下滚动 > 300 像素时调整它们的大小（通过更改顶部和底部填充）。 如果我在距离顶部 300 像素后尝试这样做，设置像 $('nav').css('padding', '30px 0 30px 0'); 这样的 css 样式都可以正常工作，但是如果我尝试使用动画来执行此操作，我会在事件之间获得巨大的延迟。

有一个例子： 没有动画 - http://jsfiddle.net/g3xLgLeb/1/（一切正常）

使用动画 - http://jsfiddle.net/g3xLgLeb/（巨大的延迟）

Answer 1

我更喜欢使用 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 过渡可能无法在某些较旧的浏览器中使用。这是一个显示cross browser compatibility 的列表。

希望这会有所帮助。 :)