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

Question

你可以在这里看到我的问题：

当我最小化我的网站时，我发现当我使用垂直滚动条时，我的内容会在我的导航上流动。 我知道我可以使用z-index使其落后。但是我希望能够向右滚动并在右侧看到页面的其余部分，而无需滚动“内容”。

现在，这只在本地运行。所以我无法给你一个页面链接。

这是剥离的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>

菜单和内容区域的CSS：

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

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

我希望你能帮助我，如果你需要更多信息，请告诉我

Answer 1

position: fixed会让您的信息在网页上“关注”，这就是文字与左栏重叠的原因。

无论如何，以下应该可以按你的意愿工作：

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

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

如果用户禁用了javascript，我仍会设置z-index。让内容隐藏在菜单下。在最坏情况下的最佳解决方案。

确保已加载jquery。如果没有，请将其添加到标题中：

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

现在在</body>：

之前添加此内容

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

以下是Fiddle以便更好地演示。