过渡固定导航栏 - CSS

Question

我使用 Twitter Bootstrap 3 的 affix() 创建了一个固定的导航栏。导航栏的功能正常，但我想在它的显示效果中添加一个 transition。

当用户滚动页面时，导航栏会立即显示，我希望能够使其动态显示。我尝试过使用 -webkit-transition: all 1s ease-in，但结果只是导航栏的宽度发生了改变。

这里是相关的FIDDLE链接。

请帮助我实现当用户向下滚动页面时动态显示导航栏。

- Unknown User

Answer 1

过渡(transition)是指将某物从一个状态转移到另一个状态。所以你正在尝试更改.navigation元素的一个或多个属性。

那么你有哪些属性可以更改呢？

你不能更改高度、宽度或不透明度，因为这些属性在过渡前后需要保持不变。如果您希望过渡涉及移动，则最好的选择是过渡元素的位置(position)。让我们用"top"属性来做到这一点。

在过渡后，导航菜单的顶部值应为0。元素的高度为250px，因此让它从top: -250开始。但是，如果我们这样做，菜单将首先被隐藏。为了解决这个问题，我们需要通过删除相对定位(relative positioning)来使其忽略顶部值。

.navigation {
    background: #fff;
    /* position: relative; */
    width: 100%;
    top: -250px;
}

然后我们可以将其过渡到0：

#nav.affix {
    position: fixed;
    top: 0;
    z-index: 1030;
    width: 100%;
    -webkit-transition: all 2s ease-in;
    transition: all 1s ease-in;
}

结果：
http://jsfiddle.net/ShL4T/8/

参考资料：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

- Mark Simpson

---

非常感谢。马克。+1 支持并且我当然接受了那个详细的回答。 - Unknown User

Answer 2

在我隐式地将position:static添加到.navigation之前，我无法使其正常工作。

- user5936810