导航菜单仅垂直跟随屏幕，而不水平跟随

Question

You can see my problem on the image here:

When I minimized my website, I discovered that my contents flows over my navigation when I use the vertical scroll bar. I know I could just use a z-index to make it go behind. But I want to be able to scroll to the right and see the rest of the page to the right, without scrolling the "content".

Right now, this is only run locally. So I can't give you a link to the page.

Here's the stripped HTML:

<div id="main-wrapper">
<div id="menu-wrapper">
    <div id="logo">
        <a href="index.html">
        </a>
    </div>
    <div id="nav">
    </div>
</div>
<div id="content-wrapper">
    <div id="sub-content">
    </div>
</div>

And the CSS for the menu and content area:

#menu-wrapper 
{
position: fixed;
width: 223px;
height: 100%;
}

#content-wrapper 
{
width: 698px;
min-height: 500px;
position: absolute;
left: 223px;
top: 41px;
}

I hope that you can help me out, and please let me know if you need any more information

Answer 1

position: fixed will make your ellement 'follow' you on page that's why the text is overlapping your left bar.

Anyway, the following should work as you want:

#menu-wrapper {
    position: fixed;
    width: 223px;
    height: 100%;
    z-index: 999;
}

#content-wrapper {
    width: 698px;
    min-height: 500px;
    padding-top: 41px;
    margin-left: 223px;
}

I would still set that z-index in case the user has javascript disabled. Let the content hide under the menu. Best solution in worst case scenario.

Make sure you have jquery loaded. If not, add this into your header:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

Now add this just before </body> :

$( document ).ready(function() {
    $(window).scroll(function() {
        $('#menu-wrapper').css({'position' : 'absolute', 'top': $(window).scrollTop()});
    });
});

Here is a Fiddle for better demonstration.