Jquery 粘性头上的动画

我发现这段代码使我的站点菜单在滚动时保持在顶部

它可以工作，但我想添加一个文本动画，类似于此网站：

我的意思是用动画使菜单的高度变小。我怎么能得到这个

$(window).scroll(function(){
    if ($(window).scrollTop() >= 300) {
       $('nav').addClass('fixed-header');
    }
    else {
       $('nav').removeClass('fixed-header');
    }
});

html

---

您可以尝试以下方法：

$（窗口）。滚动（函数（）{
如果（$（窗口）.scrollTop（）>=300）{
$（'header'）.addClass（'fixed-header'）；
}
否则{
$（'header'）.removeClass（'fixed-header'）；
}
});
正文{
高度：400vh；
字体系列：arial；
}
标题{
显示器：flex；
对齐项目：居中；
背景：#eee；
框大小：边框框；
填充：10px；
过渡：.3s；
位置：固定；
宽度：100%；
}
标题，标题横幅{
弹性：1；
}
收割台h1{
字号：18px；
}
标题ulli{
显示：内联；
}
标题ulli a{
文字装饰：无；
字体大小：12px；
颜色：#777；
}
标题。固定标题{
填充：0px 10px；
}
收割台。固定式收割台h1{
字体大小：14px；
}

芬兰旅游局





说你的
标题
等于
高度：75px当
时：不（'.fixed header'）
，且等于
高度：45px当
时。固定标题
，如果在
标题
上声明
转换：.7s
（例如），则在添加或删除必要的类时，
标题将在这两个值之间具有“转换”或“动画”。将转换添加到字体大小以使其更平滑。
<header>
  <div class="header-banner">
    <a href="/" class="logo"></a>

    <h1>Visit Finland</h1>

  </div>
  <div class="clear"></div>
  <nav>
    <ul>
      <li><a href="/archive">Archive</a></li>
      <li><a href="/events">Events</a></li>
      <li><a href="/contact">Contact</a></li>
    <ul>
  </nav>
</header>

.fixed-header {
  position: fixed;
  top:0; left:0;
  width: 100%; 
}