为什么在使用jQuery折叠标头不起作用时进行过渡？

我想让我的标题在用户向下滚动时折叠，而在用户向上滚动时显示。因此，我在Internet上找到了这个jsfiddle，并试图将此功能添加到我的项目中。

这是我的标记：

  <header class="nav-down">
    <div class="header"><a href="#"><img src="images/icons/dog.png" class="logo"><span class="title">Dogs</span></a>
      <nav>
        <ul>
          <li><a href="#"><img src="images/icons/home.png" class="logo"></a></li>
          <li><a href="#"><img src="images/icons/search.png" class="logo"></a></li>
          <li><a href="#">Sign In</a></li>
        </ul>
      </nav>
    </div>
  </header>

标头中所有元素的样式太多，但这是元素header本身的基本样式：

header
    transition all 0.2s ease-in-out
    z-index 999
    color #fff 
    background-color rgba(0, 0, 0, .8)
    width 100%
    height 2.5em
    font-size 1.5em
    position fixed
    text-align left

.nav-up
    top -2.5em

问题是，一切正常，但是没有过渡，即标题出现和消失了，但是没有执行过渡。

有人知道这是怎么回事吗？

PS：我什至尝试做* { transition all .3s ease-in-out }，但仍然没有结果。