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

Question

好的，所以我正在使用 Twitter Bootstrap，并且我有一个“navbar navbar-fixed-top”；但是，在某些页面上，我希望导航栏位于底部。作为测试，我使用 jQuery 在单击时切换类，如下所示：

function toggleMainNav() {
    $("#main-nav")
        .toggleClass("navbar-fixed-top")
        .toggleClass("navbar-fixed-bottom");
}

效果很好，但当然，它是即时的。

我希望它在两者之间过渡。然而，我对 CSS 过渡不是很有经验，经过几个小时的谷歌搜索、阅读和观看......我仍然无法让它工作。

这是一个 CSS 片段

#main-nav {
    -webkit-transition: all 0.5s;
}

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

#main-nav:hover {
    background-color: #55dd66;
}

它工作正常。

（对于那些不使用 Bootstrap 的人的更多信息： navbar-fixed-top 使 top:0 和 bottom:auto 和 navbar-fixed-bottom 相反）

提前致谢。

score 2 · Accepted Answer

如果您不知道视口的确切高度，则使用 CSS 无法创建从上到下的过渡。只能在 2 个值之间进行动画处理。

例如，您可以在以下之间转换：

top:0;
top:300px;

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

top:0;
bottom:0;

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

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

小更新：

使用 css是可能的，但只有 calc() 函数，而且这并没有得到很好的支持

1 回答 1