为什么用 jQuery 折叠 header 时转换不起作用？

Question

我想让我的 header 在用户向下滚动时折叠并在他们向上滚动时显示。所以，我在互联网上找到了这个 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 本身的基本样式：

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

事情是一切正常，但没有过渡，即 header 出现和消失，但没有执行过渡。

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

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

为什么用 jQuery 折叠 header 时转换不起作用？

Why transition when collapsing header with jQuery doesn't work?

css

jquery

css-transitions