4

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

推特Facebook

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

4

2 回答 2

3

这不能仅在 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 中使用它。

小提琴： http: //jsfiddle.net/uadDW/4/
全屏版更好看效果：http: //jsfiddle.net/uadDW/4/show/

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

于 2012-06-27T04:18:34.697 回答
1

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

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

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

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

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

于 2013-07-31T02:08:12.900 回答