固定顶部菜单和内容滚动

Question

I'm attempting to make a fixed top menu. On a viewport > 1170px (which is my minimum page viewport here), everything is ok. On viewport less than 1170px, main content of the page is horizontally scrollable (ok), but #main-menu is displayed only up to current window height, so the last items are hidden.

Is is possible to make this menu fixed and to act like a part of the scrollable content?

The site will be not responsive.

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;
}

DEMO: http://jsfiddle.net/zyqkrwtk/1/

I know it is partially solvable by setting overflow-x: auto to menu, but there will be extra scrollbar, which is not desirable.

EDIT: Sorry, I forgot to mention important thing - the page content is actually very long (it will be one-page microsite), so the fixed position is therefore desirable. Updated demo - http://jsfiddle.net/fvgf2mj6

Answer 1

You have unnecessary uses of the CSS rule position .

I fixed your code here http://jsfiddle.net/nuc4s6h9/ Basically I removed the style for #content element and the position:relative for #main-menu element. Out of the box this 2 elements have display:block which made them render one below the other.

Let me know if that is what you wanted for.

Answer 2

Ok, so I'm coming back with my solution! I have inspired in this similar question Centering a fixed element, but scroll it horizontally

Basically everything I had to change was

#main-menu {
position: absolute
...

and add this little jQuery code to set menu position and width when user scrolls/resizes window:

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

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

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

Thanks to everybody for pointing out to right direction!