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

Question

这是一个很好的例子，说明了如何创建带有侧边栏的导航栏。任何人都可以修改代码，使顶部导航固定在顶部，侧边栏 fixed/static 只有主页内容滚动吗？我可以通过将 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

Answer 1

sticky-top正在工作，但似乎没有工作，原因有两个...

主要内容区域中没有足够的内容可以滚动
它位于 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>

Answer 2

有一个相对较新的 CSS 职位属性，名为 sticky。

position: sticky;
top: 4em;

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

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

Bootstrap 4 fixed top nav and fixed sidebar

sidebar

sticky

navbar

twitter-bootstrap

bootstrap-4