css - Twitter Bootstrap 导航栏固定

Question

当屏幕尺寸低于 940px 时，我必须更改什么才能使导航栏固定？我不想让它响应。如果你将浏览器窗口调整到 940px 以下，你会看到 scroolbar-x (bottom-scrollbar) 出现，但是当你向右滚动它时，导航栏位置仍然固定，并且一些菜单不会出现。

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

Answer 1

这不能仅在 CSS 中完成。

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

所以你必须选择，要么

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

实际上，您不能让 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 一起使用。

fiddle :http://jsfiddle.net/uadDW/4/
全屏版更好看效果:http://jsfiddle.net/uadDW/4/show/

(感谢@Sherbrow 提供我制作这个的基础 fiddle )。