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

Question

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

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

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

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

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

<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.

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

编辑

显示我所追求的效果的草图。

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

我希望这有助于清除它？

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：当窗口调整大小时，菜单不会保留其位置。它会流过内容，你无法解决这个问题，因为列表位于固定位置，计算视口大小，而不是内容。