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

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>

Answer 2

有一个相对较新的 CSS 位置属性，称为sticky.

position: sticky;
top: 4em;

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