这个 Bootstrap 4.5 和 Scroll Spy 示例缺少什么？

问题描述 投票：0回答：1

为什么这个 HTML 片段不起作用？滚动间谍永远不会被激活。


<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>
    <!-- Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body { position:relative; }
    </style>
</head>
<body data-spy="scroll" data-target="#navwrapper">

<div id="navwrapper" class="sticky-top">
    <nav class="navbar navbar-light bg-light" id="navbar1">
        <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>
    </nav>
</div>

<div class="row">
    <div class="col"></div>
    <div class="col">
        <div style="height: 500px; margin-top: 100px;">
            <h4 id="item-1">Item 1</h4>
            <p>...</p>
            <h5 id="item-1-1">Item 1-1</h5>
            <p>...</p>
            <h5 id="item-1-2">Item 1-2</h5>
            <p>...</p>
            <h4 id="item-2">Item 2</h4>
            <p>...</p>
            <h4 id="item-3">Item 3</h4>
            <p>...</p>
            <h5 id="item-3-1">Item 3-1</h5>
            <p>...</p>
            <h5 id="item-3-2">Item 3-2</h5>
            <p>...</p>
        </div>
    </div>
</div>

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

查看Codepen

bootstrap-4
1个回答
0
投票

Bootstrap 4 需要 jQuery 才能运行，尽管仅将 jQuery 添加到代码中还不足以使其正常工作。我从与您的示例类似的Bootstrap 4 网页复制了代码，并为每个部分添加了一个容器和更多空间，我能够让 Scrollspy 正常工作。

body {
    position: relative;
}

p {
    height: 250px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>

<body data-spy="scroll" data-target="#navbar-example3" data-offset="0">
    <div class="container">
        <div class="row">
            <div class="col-4">
                <nav id="navbar-example3" class="navbar navbar-light bg-light flex-column position-fixed">
                    <a class="navbar-brand" href="#">Navbar</a>
                    <nav class="nav nav-pills flex-column">
                        <a class="nav-link" href="#item-1">Item 1</a>
                        <nav class="nav nav-pills 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 nav-pills 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>
                </nav>
            </div>

            <div class="col-8">
                <div>
                    <h4 id="item-1">Item 1</h4>
                    <p>...</p>
                    <h5 id="item-1-1">Item 1-1</h5>
                    <p>...</p>
                    <h5 id="item-1-2">Item 1-2</h5>
                    <p>...</p>
                    <h4 id="item-2">Item 2</h4>
                    <p>...</p>
                    <h4 id="item-3">Item 3</h4>
                    <p>...</p>
                    <h5 id="item-3-1">Item 3-1</h5>
                    <p>...</p>
                    <h5 id="item-3-2">Item 3-2</h5>
                    <p>...</p>
                    <p>...</p>
                    <p>...</p>
                </div>
            </div>
        </div>
    </div>


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</body>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.