导航栏下方的 Twitter Bootstrap 侧边栏位置不在其后面

Question

我正在使用带有引导程序的侧边栏和顶部导航栏。 无论顶部导航栏的大小如何，我都希望始终看到侧边栏。

侧边栏显示正常，但是当我使屏幕变窄（桌面上的 1/2 屏幕）时，顶部导航栏占据 2 行（如果更窄，则为 3 或 4 行）并覆盖在侧边栏的顶部，遮挡了上部侧边栏链接。

只有当我包含如下所示的导航栏右侧块时才会出现问题。

html：

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        ...
    </ul>
    <!-- The problem occurs with this ul block below -->
    <ul class="nav navbar-nav navbar-right">
        ...
    </ul>

当前的CSS：

div.navbar {
  z-index: 999;
}
.top-nav {
    padding: 0 15px;
}
@media(min-width:768px) {
    body {
        margin-top: 50px;
    }
}
@media(min-width:768px) {
    .side-nav {
        position: fixed;
        top: 51px;
        left: 225px;
        width: 225px;
        margin-left: -225px;
        border: none;
        border-radius: 0;
        overflow-y: auto;
        background-color: white;
        bottom: 0;
        overflow-x: hidden;
        padding-bottom: 40px;
    }
}

笔在这里（抱歉，如果有点冗长）

https://codepen.io/hf7dpr/pen/ggzVpd

导航栏覆盖在侧边栏上，在代码笔中调整大小在 765 到 840 像素之间。

关于如何始终看到侧边栏项目（但不覆盖顶部导航栏）的任何想法？

Answer 1

您可以根据导航栏高度，使用 javascript 更改侧边栏的顶部位置。 这是一个示例（为导航添加 jQuery、js 代码和 id，因此 js 与样式类分开）：

https://codepen.io/themeler/pen/MJXEpE

$(function () {
  var calculateHeight = function () {
    $('#side-nav').css('top', $('#navbar').height() + 'px')
  }
  // init
  calculateHeight()
  // recalculate on window resize
  $(window).on('resize', calculateHeight)
})