当使用 jQuery 折叠标头不起作用时，为什么要转换？

Question

我想让我的标题在用户向下滚动时折叠，在向上滚动时显示。所以，我在网上找到了这个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 }，但仍然没有结果。

Answer 1

修改你的手写笔代码，加入一个'top'属性:

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
    top 0
.nav-up
    top -2.5em