Bootstrap 4 固定顶部导航栏和固定侧边栏

Question

这是一个很好的示例，展示如何创建一个带有侧边栏的导航栏。有没有人可以修改代码，使得顶部导航栏固定在页面顶部，而侧边栏则保持固定不动，只有主页内容滚动？我可以通过将 class="fixed-top" 分配给 nav 来使导航栏固定在页面顶部，但我无法弄清楚如何使侧边栏固定，以便它保持在同一位置，而不是随着主页内容向上滚动。将 class="sticky-top" 应用于侧边栏似乎不起作用。

<nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-top">
    ..
</nav>
<div class="row">
    <div id="sidebar-container" class="sidebar-expanded d-none d-md-block">
        <ul class="list-group sticky-top">
            <li>Menu item..</li>
            <li>Menu item..</li>
        </ul>
    </div>
    <div class="col">
        <!-- MAIN -->
    </div>
</div>

https://www.codeply.com/go/LFd2SEMECH

- user3691644

Answer 1

sticky-top是起作用的，但似乎有两个原因导致它无法工作...

1. 主要内容区域没有足够的内容可以滚动
2. 它被定位在 top:0，所以被固定的导航栏遮挡住了

添加CSS来抵消侧边栏顶部的偏移量（与固定导航栏的高度相同）。

.sticky-offset {
    top: 56px;
}

<ul class="list-group sticky-top sticky-offset">..(sidebar)..</div>

然后，在主区域添加足够的内容（或高度），以使滚动成为必要...

工作演示： https://www.codeply.com/go/7XYosZ7VH5

<nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-top">
    ..
</nav>
<div class="row">
    <div id="sidebar-container" class="sidebar-expanded col-2 d-none d-md-block">
        <ul class="list-group sticky-top sticky-offset">
            <li>Menu item..</li>
            <li>Menu item..</li>
        </ul>
    </div>
    <div class="col">
        <!-- MAIN -->
    </div>
</div>

- Zim

---

非常感谢。效果很好。我在自己的示例中添加了大量内容，但是我将粘性偏移设置在了错误的元素上。我将其设置在了 sidebar-container 元素上，并按照您的建议添加了粘性偏移。 - user3691644

离题了，但是有没有一个单独的术语用于指代顶部栏和侧边栏？ - cs95

似乎你的侧边栏宽度在折叠状态和展开状态下都是固定的。 - AaA

Answer 2

有一个相对较新的CSS定位属性被称为sticky。

position: sticky;
top: 4em;

看看这是如何工作的，当你滚动到父元素的末尾会发生什么。将高度保留为auto。参考 - https://developer.mozilla.org/en-US/docs/Web/CSS/position

- mate.gvo