带有过渡动画的粘性标题

【问题标题】：Sticky header with transition animation带有过渡动画的粘性标题
【发布时间】：2013-07-23 01:42:46
【问题描述】：

$(function () {
    $('#nav').data('size', 'big');
});

$(window).scroll(function () {
    if ($(document).scrollTop() > 0) {
        if ($('#nav').data('size') == 'big') {
            $('#nav').data('size', 'small');
            $('#nav').stop().addClass('nav-min');
        }
    } else {
        if ($('#nav').data('size') == 'small') {
            $('#nav').data('size', 'big');
            $('#nav').stop().removeClass('nav-min');
        }
    }
});

.. 完美运行，但是菜单从正常跳转到最小，是否可以以某种方式对其进行动画处理以使过渡看起来平滑？

谢谢

【问题讨论】：

您可能不得不使用 animate() 而不是（或结合使用）更改类。

标签： jquery css menu sticky

【解决方案1】：

动画和改变类...

$('#nav').stop().animate({...}, 999, function() {
    $('#nav').addClass('nav-min');
}):

【讨论】：

谢谢，但没有任何动画。添加类会做很多事情，我想在过渡期间自动制作动画。
我不确定我是否遵循。你必须为你的类应用的东西设置动画。如果您不再使用该类，请将其丢弃。如果你把它用作其他操作的选择器，比如说，保留它。
该类降低了导航的高度，改变了背景并隐藏了某些元素。我不能通过 animate() 完成所有这些
是的，这就是我们在高度和背景动画之后添加类的原因。你也可以用 jQuery 做其他事情。
从技术上讲，您可以通过动画完成所有这些工作。 :-)