固定顶部菜单与内容一起滚动答案

【问题标题】：Fixed top menu scrolling along with content固定顶部菜单与内容一起滚动
【发布时间】：2015-09-17 14:16:31
【问题描述】：

我正在尝试制作一个固定的顶部菜单。在视口 > 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;
}

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

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

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

【问题讨论】：

Centering a fixed element, but scroll it horizontally 的可能副本
谢谢，我会检查这个问题。

标签： javascript html css twitter-bootstrap-3

【解决方案1】：

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

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

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

【讨论】：

对不起，我忘了说重要的事情-页面内容很长，因此需要固定位置 Demo: jsfiddle.net/fvgf2mj6
不幸的是，这对于纯 CSS 是不可能的。
是否可以使用一些（理想情况下独立于平台的）JS 代码？
我认为没有任何插件可以做到这一点。您仍然需要滚动在整个页面上工作，当 position:fixed 应用于菜单时会被忽略。因此，您需要使用 JavaScript 从头开始创建它。需要向菜单position:absolute; top:0申请，取页面顶部坐标查看滚动了多少，增加顶部CSS规则。那绝对应该保持滚动并使菜单保持粘性。

【解决方案2】：

好的，所以我会带着我的解决方案回来！我在这个类似的问题中得到了启发Centering a fixed element, but scroll it horizontally

基本上我必须改变的一切都是

#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/

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

【讨论】：