问Twitter引导导航栏已修复

EN

这不能仅在CSS中完成。

您给出的示例(Twitter)在所有屏幕大小下都有固定位置和固定大小的导航栏。固定位置意味着滚动条不会影响导航栏的位置，这就是为什么你不能使用x滚动条来查看导航栏的一部分，一旦导航栏的宽度小于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。

小提琴：http://jsfiddle.net/uadDW/4/

全屏版本更好地查看效果：http://jsfiddle.net/uadDW/4/show/

(感谢@Sherbrow为我制作这篇文章提供了基础小提琴)。

遇到了同样的问题，并对建议的解决方案感到兴奋，但随后我努力在自己的代码中实现(是的，noobie)。

事实证明，这里与jquery.js有冲突，我在代码中的其他地方需要它。

http://jsfiddle.net/uadDW/83/

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

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