jquery - Bootstrap Navbar Fixed Top 之前的 <div> 是否可行？

Question

我的 HTML 上有一个 navbar-fixed-top 导航。我正在使用这个 https://github.com/istvan-ujjmeszaros/bootstrap-autohidingnavbar使导航“智能”。

现在，我想放一个小<nav>在实际 navbar-fixed-top 之前.但是当我把 <nav>在 <navbar-fixed-top> 之前, 它出现在实际 navbar-fixed-top 之后.

如何让它出现在 navbar-fixed-top 之前？ ？

JSFiddle:http://jsfiddle.net/hfx24d8k/

请帮忙。

Answer 1

有几种方法可以做到这一点，这里是一种选择:

<nav class="navbar" style="position:fixed; top:0px">
    <div class="test">lorem ipsm</div>
</nav>
<nav class="navbar navbar-default navbar-fixed-top" style="top:20px">

这是应用于您的 fiddle 的修复程序:

http://jsfiddle.net/sifriday/hfx24d8k/1/

在您的 fiddle 中，.navbar-fixed-top 具有 position:fixed 和 top:0px 以将其置于屏幕顶部。因此，首先您需要将其向下移动一点，以便为“lorem ipsm”留出空间，您可以使用内联样式“top:20px”来做到这一点。

接下来您需要将 lorem ispm 向上移动。目前 body 上有 60px 的内边距，所以向上移动它最简单的方法是让你的第二个导航也固定，并将它移动到主导航上方，使用内联样式“position:fixed; top:0px”

或者，您可以从正文中移除内边距，让浏览器将其定位在屏幕顶部。 .navbar 类应用 position:relative，因此您需要通过在 lorem ispm nav 上设置 position:static 来覆盖它。