固定顶部菜单滚动随着内容

Fixed top menu scrolling along with content

本文关键字：滚动 顶部 菜单      更新时间：2023-09-26

我正在尝试制作一个固定的顶部菜单。在viewport> 1170px(这是我在这里的最小页面viewport)，一切都很好。在viewport小于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设置为菜单可以部分解决，但是会有额外的滚动条，这是不可取的。

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

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

我在这里固定了你的代码http://jsfiddle.net/nuc4s6h9/基本上我删除了#content元素的样式和position:relative的#主菜单元素。这2个元素有display:block，这使他们渲染一个低于另一个。

好了，我带着我的解决方案回来了!我在这个类似的问题中受到启发，将固定元素居中，但水平滚动

基本上我要修改的都是

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

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

相关文章：