制作固定的右侧导航栏

Question

现在我正在利用Bootstrap的大部分功能来确保它在所有浏览器和屏幕上兼容，我想继续这样做。这就是为什么我需要一个＆＃39; Bootstrap＆＃39;尽可能地解决这个问题。

当前，我在页面顶部显示了nav，如下所示，见http://imdbnator.com/table?id=9051d9111fa33e5daf9625fb7d0d8e2a

当前的Top-Navbar

希望添加

正如您在上图中所看到的，我希望将fixed添加到右侧，如果可能的话，像nav-inverse一样添加我在顶部导航栏上的所有选项，除了只有图标。也就是说，我想继续使用<li>。基本上是一个自助解决方案。

我的最终目标是，只要顶栏不可见，就可以在侧边栏上提供一组选项，我可能不得不使用我自己可以自行管理的JavaScript。

感谢您的帮助！

更新：我知道简单的CSS解决方案。但我希望与Bootstrap兼容。即。我可以使用与Bootstrap中典型导航栏相同的结构。

Answer 1

我不知道我是否以正确的方式提出您的问题，但如果您想知道如何解决这个侧边栏这很简单：

让我们假装你的引导导航有一个像这样的构建：

<ul class="navbar-right">
 <li>Some Navigation</li>
 <li>Some Navigation</li>
 <li>Some Navigation</li>
</ul>

<style>
  ul.navbar-right {
    position: fixed;
    right: 0;
    top: 50%;
  }
  ul.navbar-right li {
    float: none;
  }
</style>

<div id="fixed"></div>

这适用于所有流行的浏览器和系统。

Answer 2

取自这个答案：How to create a sticky left sidebar menu using bootstrap 3?

Bootstrap支持{34}用于＆＃34;粘性元素＆＃34;

如果你想把侧边栏放在一边，你应该用一个容器包住整个页面并强制它跟随窗户高度：

.wrap {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 100%;
}

之后放置侧边栏非常简单：

#sidebar-wrapper {
  z-index: 1000;
  position: fixed;
  left: 250px;
  width: 250px;
  height: 100%;
}

推送内容以避免使用容器的nav样式覆盖padding-top游戏

affix