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

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

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折叠标头时转换不起作用？

1 个答案: