Bootstrap 5.3.1嵌套导航中position-sticky失效问题排查

你的代码里position-sticky没生效，核心是两个问题：

1. 缺少偏移属性：粘性定位必须明确设置top/bottom值，浏览器需要知道滚动到哪个位置触发固定，缺省该属性不会生效。
2. h-100类导致高度异常：这个类让导航高度和父容器col-4完全一致，而col-4会跟随右侧长内容被拉长，导航自身高度超过视口，自然无法触发粘性固定。

修复步骤 #

1. 移除导航上的h-100类，让导航高度由自身内容决定。
2. 添加top偏移值：考虑顶部navbar的默认高度（约56px），设置top: 56px避免导航被navbar遮挡；如果需要更灵活的间距，也可以用内联样式或自定义类调整。

修改后的导航核心代码 #

<nav id="navbar-example3" class="flex-column align-items-stretch pe-4 border-end position-sticky" style="top: 56px;">

进阶优化（应对长导航） #

如果导航内容过多导致高度超过视口，可以给导航添加最大高度和滚动属性，让导航内容可滚动的同时保持容器粘性：

<nav id="navbar-example3" class="flex-column align-items-stretch pe-4 border-end position-sticky" style="top: 56px; max-height: calc(100vh - 56px); overflow-y: auto;">

完整测试代码 #

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test pagina | Wolkie</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
</head>
<body>

    <nav class="navbar bg-body-tertiary">
        <div class="container">
            <a class="navbar-brand">Navbar</a>
            <form class="d-flex" role="search">
                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
        </div>
    </nav>

    <div class="container">
        <div class="row">
            <div class="col-4">
                <nav id="navbar-example3" class="flex-column align-items-stretch pe-4 border-end position-sticky" style="top: 56px;">
                    <nav class="nav nav-pills flex-column">
                        <a class="nav-link" href="#my-services">My Services</a>
                        <nav class="nav nav-pills flex-column">
                            <a class="nav-link ms-3 my-1" href="#domains">Domains</a>
                            <a class="nav-link ms-3 my-1" href="#hosting">Hosting</a>
                            <a class="nav-link ms-3 my-1" href="#transfer">Transfer</a>
                        </nav>
                        <a class="nav-link" href="#my-profile">My Profile</a>
                        <nav class="nav nav-pills flex-column">
                            <a class="nav-link ms-3 my-1" href="#account-details">Account Details</a>
                            <a class="nav-link ms-3 my-1" href="#change-password">Change Password</a>
                            <a class="nav-link ms-3 my-1" href="#newsletter">Newsletter</a>
                        </nav>
                        <a class="nav-link" href="#billing">Billing</a>
                        <nav class="nav nav-pills flex-column">
                            <a class="nav-link ms-3 my-1" href="#overview">Overview</a>
                            <a class="nav-link ms-3 my-1" href="#payment-details">Payment Details</a>
                        </nav>
                        <a class="nav-link" href="#status">Status</a>
                        <a class="nav-link" href="#logout">Logout</a>
                    </nav>
                </nav>
            </div>

            <div class="col-8">
                <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
                    <div id="my-services">
                        <h4>My Services</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
                    </div>
                    <div id="domains">
                        <h5>Domains</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
                    </div>
                    <div id="hosting">
                        <h5>Hosting</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
                    </div>
                    <div id="transfer">
                        <h5>Transfer</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
                    </div>
                    <div id="my-profile">
                        <h4>My Profile</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
                    </div>
                    <div id="change-password">
                        <h5>Change Password</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
                    </div>
                    <div id="newsletter">
                        <h5>Newsletter</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
                    </div>
                    <div id="billing">
                        <h4>Billing</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
                    </div>
                    <div id="overview">
                        <h5>Overview</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
                    </div>
                    <div id="payment-details">
                        <h5>Payment Details</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
                    </div>
                    <div id="status">
                        <h4>Status</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
                    </div>
                    <div id="logout">
                        <h4>Logout</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien sapien. In vel auctor lorem. Proin eu orci ac urna accumsan cursus vel vitae justo. Cras faucibus purus in euismod rutrum. In tristique massa vitae iaculis bibendum. Vivamus eget leo diam. Sed scelerisque dui id porta imperdiet. Maecenas dictum tincidunt mollis.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
</body>
</html>

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