时间戳

首页 > 解决方案 > 侧栏列上的 Bootstrap 置顶不起作用

html - 侧栏列上的 Bootstrap 置顶不起作用

问题描述

我正在尝试在右侧创建一个粘性侧边栏。侧边栏菜单位于网格列内。我正在使用这个问题sticky-top中显示的类，但它仍然不起作用。

这是代码...

<div class="container min-vh-100 overflow-hidden">
    <nav class="navbar navbar-light navbar-expand">
        <a class="navbar-brand" href="#">Brand</a>
        <ul class="navbar-nav">
            <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
        </ul>
    </nav>
    <div class="row">
        <div class="col-sm-8 content pt-4">
            ...
        </div>
        <div class="col-sm-4">
            <div class="menu sticky-top p-3 bg-light">
                <h5 class="text-primary">Sticky menu</h5>
                <div class="nav flex-column">
                    <a href="#" class="nav-link pl-0">Menu 1</a>
                    <a href="#" class="nav-link pl-0">Menu 2</a>
                    <a href="#" class="nav-link pl-0">Menu 3</a>
                </div>
            </div>
        </div>
    </div>
</div>

Codeply：https ://codeply.com/go/xwYPD1B1tk

当用户向下滚动时，我想将menudiv 放在顶部。

标签： htmlcssbootstrap-4sticky

解决方案

如果粘性元素的任何父容器使用 ，则位置粘性将不起作用overflow:hidden。overflow-hidden从容器中删除类允许sticky-top工作。

<div class="container min-vh-100">
    <nav class="navbar navbar-light navbar-expand">
        ..
    </nav>
    <div class="row">
        <div class="col-sm-8 content pt-4">
            ...
        </div>
        <div class="col-sm-4">
            <div class="menu sticky-top p-3 bg-light">
                <h5 class="text-primary">Sticky menu</h5>
                <div class="nav flex-column">
                    ...
                </div>
            </div>
        </div>
    </div>
</div>

https://codeply.com/go/9Nf6pOa7TN

推荐阅读