jquery - 为什么在使用 jQuery 折叠 header 时转换不起作用？

Question

我想让我的标题在用户向下滚动时折叠并在他们向上滚动时显示。所以，我找到了这个 jsfiddle在 Internet 上并尝试将此功能添加到我的元素中。

这是我的标记:

  <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

更改您的手写笔代码以包含“顶部”属性:

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