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

Posted 2023-03-21

【中文标题】Bootstrap 4 固定顶部导航和固定侧边栏

【英文标题】：Bootstrap 4 fixed top nav and fixed sidebar

【发布时间】：2018-09-13 10:36:42

【问题描述】：

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

【参考方案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>

【讨论】：

非常感谢。效果很好。我在自己的示例中添加了一堆内容，但是我在错误的元素上添加了粘性偏移。我在 sidebar-container 元素上找到了它，并且按照您的建议缺少粘性偏移量。

离题了，但是有没有一个术语可以同时指代顶栏和侧栏？

【参考方案2】：

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

position: sticky;
top: 4em;

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