粘性标题上的动画

Question

我发现此代码可以让我的网站菜单在滚动时保持在顶部。

它有效，但我想添加一个文本动画，类似于这个网站：http://somlaweb.com/

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

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

HTML

<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>

CSS

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

Answer 1

您可以尝试这样的事情：

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

body{
  height: 400vh;
  font-family: arial;
}

header {
  display: flex;
  align-items: center;
  background: #eee;
  box-sizing: border-box;
  padding: 10px;
  transition: .3s;
  position: fixed;
  width: 100%;
}

header .header-banner{
  flex: 1;
}

header h1{
  font-size: 18px;
}

header ul li{
  display: inline;
}

header ul li a{
  text-decoration: none;
  font-size: 12px;
  color: #777;
}

header.fixed-header{
  padding: 0px 10px;  
}

header.fixed-header h1{
  font-size: 14px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>