Bootstrap 5中sticky-top类无法生效的问题求助

你的问题核心出在body元素的d-flex flex-column min-vh-100类——当body作为flex容器时，会改变粘性定位（sticky）的滚动上下文，导致sticky-top无法正常触发。此外，显式指定粘性元素的top值能避免潜在的默认值冲突。

修复步骤： #

• 移除body上的d-flex flex-column类，保留bg-light和min-vh-100，改用独立容器实现垂直布局（如需固定底部footer可参考后续说明）。
• 将菜单的sticky-top替换为sticky-top-0，显式指定top值为0，确保粘性定位逻辑清晰。
• 确认粘性元素的父级（col-lg-4）未设置overflow: hidden等会干扰定位的属性，你的代码中这部分无问题。

修改后的完整代码： #

<!DOCTYPE html>
<html dir="ltr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css">
    <title>Selda</title>
</head>
<body class="bg-light min-vh-100" data-new-gr-c-s-check-loaded="8.904.0" data-gr-ext-installed="">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container">
        <a class="navbar-brand" href="#">Selda</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link" href="">Home</a>
                </li>    
                <li class="nav-item">
                    <a class="nav-link" href="">Products</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="">Counselings</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Learning</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="">About-US</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="">Contact-US</a>
                </li>
            </ul>
            <ul class="navbar-nav mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link" href="#">Login</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Register</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div class="container py-3">
    <div class="row">
        <div class="col-lg-8 mb-3">
            <div class="card">
                <div class="card-header" style="height: 90px"></div>
                <div class="card-body">
                    <div class="d-block d-md-flex mb-3">
                        <div style="width:115px; margin-top:-75px">
                            <img src="https://i.sstatic.net/vRDsY.png" class="rounded-circle img-thumbnail">
                            <div class="text-center">
                                <span class="badge bg-success">Online</span>
                            </div>
                        </div>
                        <h1 class="h5">
                            <i class="fa-solid fa-circle-check text-success"></i>
                            John Sina
                        </h1>
                    </div>
                    <!-- 添加测试文本，方便验证滚动粘性效果 -->
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div>
        </div>
        <div class="col-lg-4 mb-3">
            <div class="menu sticky-top-0">
                <div class="card">
                    <div class="card-body">
                        <h6 class="card-title">Plan</h6>
                    </div>
                    <ul class="list-group">
                        <li class="list-group-item p-0 align-items-center">
                            <a class="d-flex justify-content-between list-group-item list-group-item-action border-0" href="#">
                                <div>
                                    <i class="fa-solid fa-file-pdf"></i>
                                    <span>Download PDF</span>
                                </div>
                                <span class="badge bg-primary rounded-pill">Free</span>
                            </a>
                        </li>
                        <li class="list-group-item p-0 align-items-center">
                            <a class="d-flex justify-content-between list-group-item list-group-item-action border-0" href="#">
                                <div>
                                    <i class="fa-solid fa-photo-film"></i>
                                    <span>Download Video</span>
                                </div>
                                <span class="badge bg-primary rounded-pill">85,000 $</span>
                            </a>
                        </li>
                        <li class="list-group-item p-0 align-items-center">
                            <a class="d-flex justify-content-between list-group-item list-group-item-action border-0" href="#">
                                <div>
                                    <i class="fa-solid fa-book"></i>
                                    <span>Download Word</span>
                                </div>
                                <span class="badge bg-primary rounded-pill">Free</span>
                            </a>
                        </li>
                    </ul>
                    <div class="card-body">
                        <button class="btn btn-success btn-lg w-100">Payment</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4 mb-3">
            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">About me</h6>
                    <p>Text</p>
                </div>
            </div>
        </div>
        <div class="col-lg-4 mb-3">
            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">My Video</h6>
                    <video poster="https://i.sstatic.net/vRDsY.png" controls="" class="w-100" __idm_id__="1286145">
                        <source src="http://localhost:8000/storage/videos/counselings/1674029169.mp4" type="video/mp4">
                    </video>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>

补充说明： #

如果需要保留页面footer固定在底部的效果，可单独创建一个flex容器包裹所有内容，而非直接将body设为flex容器：

<body class="bg-light">
  <div class="d-flex flex-column min-vh-100">
    <nav>...</nav>
    <div class="container py-3 flex-grow-1">...</div>
    <footer class="mt-auto py-3 bg-body-tertiary">...</footer>
  </div>
</body>

内容的提问来源于stack exchange，提问作者Mahmoud Khosravi