html - CSS 固定位置导航与整页布局中的设置宽度对齐

Question

我正在尝试创建一个固定的导航菜单，它会向下滚动到页面的一侧。

该页面的结构使得所有内容都拉伸(stretch)到页面的整个宽度，然后每个 div 使其内容的宽度固定为 860 像素。现在我来添加固定导航，我正在努力使固定导航对齐到此内容的右侧。

我不能有一个设置固定页面宽度然后包含所有内容的页面包装器，因为背景会拉伸(stretch)页面的整个宽度。

我尝试添加一个固定的 div 来包含导航，但这个 div 最终拦截了所有点击，因为它位于其余内容之上。

页面上有几个 section，所以我认为我不能将导航嵌套在第一部分中。

<div id="navigation">
    <ul>
    </ul>
</div>

<div class="section">       
    <div class="section-content">
        <div class="section-content-panel">
            <p>Blah blah blah</p>
        </div>
    </div>
</div>

<div class="section">       
    <div class="section-content">
        <div class="section-content-panel">
            <p>Blah blah blah</p>
        </div>
    </div>
</div>

还有 CSS:

#navigation {
    height: 100%;
    left: 50%;
    margin-left: -480px;
    position: fixed;
    width: 960px;
    z-index: 999;
}

#navigation ul {
    background: blue;
    height: 200px;
    margin: -50px 0 0;
    position: absolute;
    top: 50%;
    right: 0;
    width: 80px;
}

.section {
    margin: 0 auto;
    position: relative;
    padding: 0 0 100px 0;
    width: 100%;
}

.section-content {
    background-color: #1d1d1d;
    background-color: rgba(29, 29, 29, 0.96);
    color: #ffffff;
    padding: 24px 0;
    position: relative;
}

.section-content-panel {
    margin: 0 auto;
    padding-right: 100px;
    position: relative;
    width: 860px;
}

JSFiddle .

有人可以帮我让它正常工作吗？

编辑

展示我想要的效果的草图。

这是一个粗略的草图，但蓝色是视口(viewport)，灰色是部分，红色是所有内容的宽度。这些部分包含红色宽度的所有内容，但它们的背景需要展开全屏。绿色是导航，我希望它固定在视口(viewport)中，各部分在它后面滚动。

我希望这有助于清除它？

Answer 1

好的，草图很清晰。

我相信你不需要div#navigation。我删除了 div 并为菜单提供了 id，并将 CSS 更改为:

#navigation {
    background: blue;
    position: fixed;
    height: 200px;
    width: 100px;
    top: 50%;
    right: 50%;
    margin-top: -100px;
    margin-right: -480px;
    z-index: 999;
}

检查 updated fiddle .

注1:改变高度或宽度也需要改变边距。所以当高度或宽度是动态的时，它不会正确对齐。

注意2:当窗口调整大小时，菜单不会保持原位。它会覆盖内容，您无法解决这个问题，因为列表位于根据视口(viewport)大小而不是内容计算的固定位置。