侧栏列上的Bootstrap粘顶功能不起作用 [英] Bootstrap sticky-top on sidebar column doesn't work

问题描述

我正在尝试在右侧创建一个粘性侧栏.侧边栏菜单位于网格列内.我正在使用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://www.codeply.com/go/xwYPD1B1tk

menu div是我在用户向下滚动时要坚持的顶部.

解决方案

如果粘性元素的父容器的 any 使用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

I'm trying to create a sticky sidebar on the right. The sidebar menu is inside a grid column. I'm using the sticky-top class as shown in this question, but it still doesn't work.

Here's the code...

<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://www.codeply.com/go/xwYPD1B1tk

The menu div is the one I'd like to stick to the top as the user scrolls down.

解决方案

Position sticky will not work if any of the parent containers of the sticky element use overflow:hidden. Removing the overflow-hidden class from the container allows the sticky-top to work.

<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

这篇关于侧栏列上的Bootstrap粘顶功能不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！