Bootstrap 4.5 Scroll Spy示例失效：滚动监听为何无法激活？

你的代码里有几个关键问题导致Scroll Spy无法正常激活，逐个拆解：

1. Popper.js版本不匹配 #

Bootstrap 4.5依赖的是Popper.js v1.x，但你引入的是v2.9.2，版本不兼容会直接导致Bootstrap的JS组件（包括Scroll Spy）罢工，必须换成对应版本的Popper.js。

2. 导航结构不符合识别规则 #

Scroll Spy要求data-target指向的容器下，直接包含.nav组件，且导航链接的层级不能嵌套过深。你现在把.nav嵌套在了.navbar里面，Scroll Spy没法正确识别深层的.nav-link。

3. 未设置滚动偏移量 #

你用了sticky-top的导航栏，滚动时锚点元素会被导航栏挡住，Scroll Spy没法准确判断当前滚动位置，自然不会激活对应的链接。得加data-offset属性，值一般等于导航栏的高度。

4. 内容容器滚动范围不足 #

你把内容放在了固定高度500px的div里，但data-spy绑在了body上，body没有足够的滚动高度触发监听。要么移除内容div的固定高度，要么把Scroll Spy绑到内容容器上，给容器加overflow-y: scroll让它能独立滚动。

修复后的完整代码 #

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scrollspy with Sticky Navbar</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body { 
            position: relative;
            padding-top: 70px; /* 给sticky导航栏预留位置 */
        }
        #content-wrapper {
            height: calc(100vh - 70px);
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <div id="navwrapper" class="sticky-top navbar navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <nav class="nav flex-column">
            <a class="nav-link" href="#item-1">Item 1</a>
            <nav class="nav flex-column">
                <a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
                <a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
            </nav>
            <a class="nav-link" href="#item-2">Item 2</a>
            <a class="nav-link" href="#item-3">Item 3</a>
            <nav class="nav flex-column">
                <a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
                <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
            </nav>
        </nav>
    </div>

    <div class="row">
        <div class="col"></div>
        <div class="col">
            <div id="content-wrapper" data-spy="scroll" data-target="#navwrapper" data-offset="70">
                <h4 id="item-1">Item 1</h4>
                <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.</p>
                <h5 id="item-1-1">Item 1-1</h5>
                <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.</p>
                <h5 id="item-1-2">Item 1-2</h5>
                <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.</p>
                <h4 id="item-2">Item 2</h4>
                <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.</p>
                <h4 id="item-3">Item 3</h4>
                <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.</p>
                <h5 id="item-3-1">Item 3-1</h5>
                <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.</p>
                <h5 id="item-3-2">Item 3-2</h5>
                <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.</p>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

修复要点 #

• 替换Popper.js为v1.16.1，和Bootstrap 4.5版本匹配；
• 把Scroll Spy绑定到内容容器#content-wrapper，设置overflow-y: auto让容器可滚动，同时加data-offset="70"避开导航栏遮挡；
• 调整导航结构，让.nav直接在data-target指向的容器下，确保Scroll Spy能识别所有链接；
• 给段落添加实际文本，保证容器有足够滚动高度触发激活。

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