javascript - 填充动画延迟

Question

我正在尝试创建固定顶部菜单，并在窗口向下滚动 > 300px 时调整它们的大小(通过更改顶部和底部的填充)。 如果我在距离顶部 300px 之后尝试，设置 css 样式，如 $('nav').css('padding', '30px 0 30px 0'); 一切正常，但如果我尝试用动画做这个，我在事件之间得到巨大的延迟。

有例子: 没有动画 - 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 的列表.

希望这对您有所帮助。 :)