Question

我正在尝试制作一个固定的顶级菜单。在视口上＆gt; 1170px（这是我的最小页面视口），一切正常。在小于1170px的视口上，页面的主要内容可以水平滚动（ok），但#main-menu仅显示当前窗口高度，因此最后一项是隐藏的。

是否可以将此菜单修复为和，以便像可滚动内容的一部分一样？

该网站不响应。

HTML：

<nav id="main-menu">
    <div class="container">
        <ul class="nav">
            <li id="item1"><a href="#">Menu item 1</a></li>
            <li id="item2"><a href="#">Menu item 2</a></li>
            <li id="item3"><a href="#">Menu item 3</a></li>
            <li id="item4"><a href="#">Menu item 4</a></li>
            <li id="item5"><a href="#">Menu item 5</a></li>
        </ul>
    </div>
</nav>

<div id="content">
    <div class="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum odio et interdum pretium.</p>
    </div>
</div>

CSS

body {
  background-color: #000;
  color: #fff;
  font-size: 17px;
  min-width: 1170px;
}
.container {
  width: 1170px;
}
#main-menu {
  position: fixed;
  height: 68px;
  width: 100%;
  display: block;
  top: 0px;
  z-index: 500;
}

#content {
  position: relative;
  top: 150px;
}

样本： https://www.eclipse.org/paho/clients/cpp/

我知道将overflow-x: auto设置为菜单可以部分解决，但会有额外的滚动条，这是不可取的。

编辑：抱歉，我忘了提到重要的事情 - 页面内容实际上很长（它将是一页微网站），因此固定位置是可取的。 更新了演示 - http://jsfiddle.net/zyqkrwtk/1/

Answer 1

您不必要地使用CSS规则position。

我在这里修改了你的代码http://jsfiddle.net/nuc4s6h9/基本上我删除了#content元素的样式和＃main-menu元素的position:relative。开箱即用的这两个元素有display:block，这使得它们一个接一个地渲染。

如果这是您想要的，请告诉我。

Answer 2

好的，所以我回来了我的解决方案！我在这个类似的问题Centering a fixed element, but scroll it horizontally

中受到启发

基本上我必须改变的是

IN

并在用户滚动/调整窗口大小时添加这个小jQuery代码来设置菜单位置和宽度：

#main-menu {
position: absolute
...

DEMO： http://jsfiddle.net/LorLe7jx/

感谢大家指出正确的方向！

修复了顶部菜单与内容一起滚动的问题

2 个答案: