Twitter Bootstrap 导航栏已修复答案

【问题标题】：Twitter Bootstrap Navigation Bar FixedTwitter Bootstrap 导航栏已修复
【发布时间】：2015-06-19 15:47:03
【问题描述】：

当屏幕尺寸低于 940 像素时，我必须更改哪些内容才能固定导航栏？我不想让它响应。如果你将浏览器窗口调整到940px以下，你会看到scrollbar-x（底部滚动条）出现了，但是当你向右滚动时，导航栏位置仍然固定，一些菜单不会出现。

也许一些图片可以解释我的问题。

【问题讨论】：

如果你想让你的 CSS 以特定的分辨率改变，你必须使用响应式设计，例如媒体查询
加个对比脸书没意义，因为脸书的导航栏不是固定的，所以不会遇到同样的问题。
@EzequielMuns 是的，这没有任何意义，但如果你在 facebook 上关闭你的 javascript，导航栏就会像推特一样，当我们向右滚动时菜单不会出现。
@jackwaners，并非所有客户都想要一个响应式网站，所以我认为如果只有 twitter bootstrap 添加更多脚本来修复导航栏，那就太好了。在谷歌上搜索后，我找到了这个script，但我仍然无法将它实现到我的导航栏。
该脚本正是您所需要的，您可以在 CSS 中将您的导航栏声明为已修复，然后使用 ScrollSpy 使其可 y 滚动（这将优雅地降级为您当前所经历的用户没有启用 JS）。

【解决方案1】：

这不能单独在 CSS 中完成。

您给出的示例（Twitter）在所有屏幕尺寸下都有固定位置和固定尺寸的导航栏。固定位置意味着滚动条不会影响导航栏的位置，这就是为什么您不能使用 x-scrollbar 来查看导航栏的部分，一旦它小于 940px 宽，就会隐藏在“下方”浏览器窗口的右边框。

所以你必须选择，要么

有一个固定位置，固定大小的导航栏，无论用户向下滚动多远，导航栏都会出现在顶部，并接受在足够小的屏幕下他们不会的'无法水平滚动查看全部内容，或者
有一个固定位置，可变尺寸导航栏，它可以调整其宽度以适应不同的屏幕尺寸，这有望首先减少水平滚动的需要，尤其是如果你让它垂直增长，如果它的内容不适合一行，或者
有一个非固定位置、固定大小的导航栏，它会响应水平滚动，但在用户向下滚动页面时不会一直存在。李>

实际上，您不能让position 在 x 方向以一种方式工作，而在 y 方向以另一种方式工作。

您可以通过使用 CSS 检查器在 Twitter 页面中编辑以下类来了解我所说的选项 2：

.global-nav .container {
    width: auto;
    max-width: 865px;
}
.global-nav, .global-nav-outer {
    height: auto;
}

第二个选择器在内容无法容纳在一行时实现垂直流动性。

您可以通过进行以下更改来了解我所说的选项 3 的含义：

.topbar {
    position: absolute;
    /* ... the rest as is */
}

编辑

当然，不能在 CSS 中完成并不意味着它根本不能完成。这是一个实现您提到的脚本的jsfiddle。这使用 MooTools 而不是 jQuery，我通常使用 bootstrap。

（感谢@Sherbrow 提供了我制作这个的基础小提琴）。

【讨论】：

【解决方案2】：

遇到了同样的问题，对建议的解决方案感到很兴奋，但后来我很难在自己的代码中实现（是的，noobie）。

原来这里与 jquery.js 有冲突，我在代码的其他地方需要它。

/* code as before .. only added jquery.js link */

从上述小提琴中的外部资源中删除 jquery.js，您将获得原始所需的行为。老鼠！

【讨论】：