Javascript 如何设置粘性标题的动画？

我有一个粘性标题，当达到160的高度时，使用jQuery将其固定在滚动条上

$(window).scroll(function()
{

    if( $(window).scrollTop() > 160)
{

        $('.dark-menu').addClass('stickyNav');
        $('header').addClass('mainHeaderFixed');
        $(".menu-second-menu-container").hide();
        $(".menu-first-menu-container").addClass('new-end');
        $("a.main-logo").hide();
        $("a.small-logo").show();
        $(".bp-phone").addClass("stickyNumber");
        $("img.telephoneIconHeader").addClass("stickyImg");
        $("a.topHeaderMailto").addClass("stickyaa");        
}
else
{
        $('.dark-menu').removeClass('stickyNav');
        $("a.topHeaderMailto").removeClass("stickyaa");
        $('header').removeClass('mainHeaderFixed');
        $(".menu-second-menu-container").show();
        $(".menu-first-menu-container").removeClass('new-end');
        $("a.main-logo").show();
        $("a.small-logo").hide();
        $(".bp-phone").removeClass("stickyNumber");
        $("img.telephoneIconHeader").removeClass("stickyImg");
} 
});

这对于显示/隐藏元素很好，但我希望整个粘性导航和backbar在滚动上设置动画

我尝试在标题部分应用CSS：

    -webkit-transition: height 5s;
    -moz-transition: height 5s;
    transition: height 5s;

但这是行不通的。我能做些什么使这个动画在卷轴上

这是我的网站：

以下是我想要实现的目标：

编辑

你贴的笔头总是固定的，不粘的。如果你想这样做，你需要给出你的.main位置：从一开始就固定，只需改变元素的高度

过渡对标题没有影响，因为它没有设置的高度。当你换掉两个logo版本时，它会被重新计算

有关此操作的详细信息，请参见；如果不想指定高度，请参见

旧的

仅当图元的高度实际更改时，在“高度”上设置过渡才会显示效果。在您的情况下，高度保持不变。尝试使用以下CSS更改元素的高度，您将看到转换

.main {
    height: 100px;

    -webkit-transition: height 5s;
    -moz-transition: height 5s;
    transition: height 5s;
}

.main.mainHeaderFixed {
    height: 160px;
}

---

你想要哪种类型的annimation以及它的成分？？？我希望它是这样的：我们无法打开你提供的站点链接，你能提供你正在添加和删除的类的css吗？我已经在上面添加了高度，但它仍然不能很好地工作。谢谢你的帮助！这是因为笔中的页眉一直是固定的，经过一定的滚动距离后就会缩小。我会更新答案。嗨，汤姆，谢谢你宝贵的答案。我今天要做更多的测试，很快就会更新。再次感谢：不客气。如果你有任何问题，尽管问。