关于javascript：转换固定的导航栏-CSS

Transitioning Affixed Navigation bar - CSS

我已经使用Twitter Bootstrap 3的affix()固定了导航栏。

导航栏一切正常。我想在导航栏的外观中添加transition。

当用户滚动页面时，导航栏将立即显示。我想制作动画。

尝试过-webkit-transition: all 1s ease-in，但结果是导航栏的宽度。

这里是FIDDLE。

当用户向下滚动时，请帮助我制作动画。

要转换某些内容，请将其从一种状态移到另一种状态。因此，您要尝试的是更改.navigation元素的一个或多个属性。

您可以更改哪些属性？

您不能更改高度，宽度或不透明度，因为在转换之前和之后需要保持相同。如果您希望过渡涉及运动，那么最好的选择是过渡元素的位置。让我们使用" top "属性来执行此操作。

转换后，您的导航需要以0作为其最高值。元素的高度为250px，所以让我们以top: -250开头。但是，如果执行此操作，则菜单最初将被隐藏。要解决此问题，我们需要通过删除相对位置使其忽略最高值。

1
2
3
4
5
6

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

然后我们可以将其转换为0：

1
2
3
4
5
6
7
8

#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/zh-CN/docs/Web/Guide/CSS/Using_CSS_transitions