固定顶部菜单和内容滚动

Question

我正在尝试制作固定的顶层菜单。 在大于1170px的视口（这里是我的最小页面视口）上，一切正常。 在小于1170px的视口上，页面的主要内容可以水平滚动（确定），但是#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;
}

演示： http : //jsfiddle.net/zyqkrwtk/1/

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

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

Answer 1

您有不必要的CSS规则position用法。

我在这里固定了代码http://jsfiddle.net/nuc4s6h9/基本上，我删除了#content元素的样式和＃main-menu元素的position:relative 。 开箱即用，这2个元素具有display:block ，使它们在另一个下方渲染。

让我知道这是否是您想要的。

Answer 2

好的，我将返回我的解决方案！ 我启发了这个类似的问题， 将固定元素居中，但水平滚动

基本上我要做的就是

#main-menu {
position: absolute
...

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

var alignMenu = function() {
    $('#main-menu').css({
        'top': $('body').scrollTop(),
        'width': $('#vystuduj-to').width()
    })
}

$(window).scroll(function(){ alignMenu() });
$(window).resize(function(){ alignMenu() });

演示： http : //jsfiddle.net/LorLe7jx/

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