Jquery 在固定顶部导航栏和固定底部导航栏（带引导）之间切换时，如何启用CSS转换

好的，我使用Twitter引导，我有一个“导航栏导航栏固定顶部”；但是，在某些页面上，我希望导航栏位于底部。作为测试，我使用jQuery在单击时切换类，如下所示：

函数切换mainnav（）{
$（“主导航”）
.toggleClass（“导航条固定顶部”）
.toggleClass（“导航条固定底部”）；
}

这很好，但当然，它是即时的

我希望它能在两者之间过渡。然而，我对CSS转换不是很有经验，在谷歌搜索、阅读和观看了几个小时后。。。我还是不能让它工作

这里有一个CSS片段

#主导航{
-webkit过渡：所有0.5s；
}

如果我做了这样的测试（以确保使用了正确的转换属性）

#主导航：悬停{
背景色：#55dd66；
}

它很好用

（不使用引导的用户的更多信息：navbar fixed top使顶部为：0，底部为：auto，navbar fixed bottom则相反）

---

提前感谢。

如果您不知道视口的高度，使用CSS无法创建从上到下的过渡。只能在两个值之间设置动画

例如，您可以在以下各项之间进行转换：

top:0;
top:300px;

top:0;
bottom:0;

但不可能在以下两者之间转换：

top:0;
top:300px;

top:0;
bottom:0;

我为你做了这把小提琴作为例子

我认为使用jquery设置对象动画是您正在寻找的解决方案。这样你就可以获得窗口高度，并将固定导航栏设置为所需的正确偏移量

小更新：

css可以使用，但是只有calc（）函数，这并没有得到很好的支持

---

我非常确定，通过将固定元素的顶部从0%设置为100%，您可以使用百分比来完成此操作。。