Question

我尝试创建固定顶级菜单，并在窗口向下滚动时调整大小（通过更改填充顶部和底部）＆gt;例如300px。如果我尝试从顶部300px之后，设置像$('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。

的列表

希望这会有所帮助。：）

填充动画延迟

1 个答案: