Question

这是如何使用侧边栏创建导航栏的一个很好的示例。任何人都可以修改代码，以便顶部导航是顶部固定的，侧边栏固定/静态只有主页内容滚动？我可以通过将this分配到var myStore = new CustomStore({ load: function(loadOptions: any) { ... }.bind(this), ... });来使导航导航顶部固定，但我无法弄清楚如何修复侧边栏以使其保持在同一位置而不是向上滚动主页面内容。将class="fixed-top"应用于侧边栏似乎无效。

nav

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固定顶部导航和固定侧边栏

2 个答案: