下面是我应用滚动间谍引导组件的模板的代码片段。
以下代码片段确实会在单击带有href标记<a>时获取内容，但其容器不粘稠，如文档中所示。
根据引导文档，有 2 个使用方法数据属性和通过 javascript。
我尝试了这两种方法，但是向下滚动时容器不会粘在顶部。
如何使其粘稠？
body {
position: relative;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<body data-spy="scroll" data-target="#navbar-example">
<ul class="nav nav-pills nav-fill" id="navbar-example2" class="navbar navbar-light bg-light">
<li class="nav-item">
<a class="nav-link active" href="#fat">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mdo">Longer nav link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#one">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#two">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#three">Link</a>
</li>
</ul>
<div>
<h4 id="fat">@fat</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam inventore magnam sint! Numquam culpa totam neque hic perferendis saepe. Nobis quasi architecto quidem quae facere ducimus blanditiis sequi, deleniti culpa, voluptatibus exercitationem!
Impedit, quaerat voluptatibus! Eum dicta expedita odit ipsa laborum culpa laboriosam quas quod magnam mollitia sapiente quis quia odio nesciunt accusamus aperiam eos omnis, earum officiis beatae soluta. Perferendis enim fuga hic iusto. Eos, vel
voluptatibus. Nobis, excepturi veniam incidunt porro ipsam facere, dolor quis nihil quod recusandae, perferendis voluptas et. Distinctio accusantium laboriosam animi quidem! Quo sunt quis suscipit asperiores accusantium ea, voluptate excepturi fugit
porro quasi qui provident quibusdam voluptatum nisi rem molestias cum necessitatibus natus officia? Similique nobis laudantium aliquid ab est incidunt officiis magnam deserunt quod aspernatur dolorem quos error facilis sit voluptatum mollitia amet
dolor, harum voluptatibus illum perferendis! Temporibus, debitis repudiandae ratione eum a cumque aperiam consectetur. Nemo itaque dolores assumenda vel quos consectetur commodi! Delectus magni ab, omnis, quidem nostrum at voluptate aliquid quisquam
obcaecati accusantium recusandae voluptatum necessitatibus molestias ea rerum temporibus nesciunt optio consequatur corrupti sint quia et deserunt porro. Numquam, natus asperiores. Laborum at ex unde asperiores, dolor fugiat natus. Placeat, modi!
Impedit excepturi reprehenderit dolorem voluptate. Soluta!</p>
<h4 id="mdo">@mdo</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam inventore magnam sint! Numquam culpa totam neque hic perferendis saepe. Nobis quasi architecto quidem quae facere ducimus blanditiis sequi, deleniti culpa, voluptatibus exercitationem!
Impedit, quaerat voluptatibus! Eum dicta expedita odit ipsa laborum culpa laboriosam quas quod magnam mollitia sapiente quis quia odio nesciunt accusamus aperiam eos omnis, earum officiis beatae soluta. Perferendis enim fuga hic iusto. Eos, vel
voluptatibus. Nobis, excepturi veniam incidunt porro ipsam facere, dolor quis nihil quod recusandae, perferendis voluptas et. Distinctio accusantium laboriosam animi quidem! Quo sunt quis suscipit asperiores accusantium ea, voluptate excepturi fugit
porro quasi qui provident quibusdam voluptatum nisi rem molestias cum necessitatibus natus officia? Similique nobis laudantium aliquid ab est incidunt officiis magnam deserunt quod aspernatur dolorem quos error facilis sit voluptatum mollitia amet
dolor, harum voluptatibus illum perferendis! Temporibus, debitis repudiandae ratione eum a cumque aperiam consectetur. Nemo itaque dolores assumenda vel quos consectetur commodi! Delectus magni ab, omnis, quidem nostrum at voluptate aliquid quisquam
obcaecati accusantium recusandae voluptatum necessitatibus molestias ea rerum temporibus nesciunt optio consequatur corrupti sint quia et deserunt porro. Numquam, natus asperiores. Laborum at ex unde asperiores, dolor fugiat natus. Placeat, modi!
Impedit excepturi reprehenderit dolorem voluptate. Soluta!</p>
<h4 id="one">one</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam inventore magnam sint! Numquam culpa totam neque hic perferendis saepe. Nobis quasi architecto quidem quae facere ducimus blanditiis sequi, deleniti culpa, voluptatibus exercitationem!
Impedit, quaerat voluptatibus! Eum dicta expedita odit ipsa laborum culpa laboriosam quas quod magnam mollitia sapiente quis quia odio nesciunt accusamus aperiam eos omnis, earum officiis beatae soluta. Perferendis enim fuga hic iusto. Eos, vel
voluptatibus. Nobis, excepturi veniam incidunt porro ipsam facere, dolor quis nihil quod recusandae, perferendis voluptas et. Distinctio accusantium laboriosam animi quidem! Quo sunt quis suscipit asperiores accusantium ea, voluptate excepturi fugit
porro quasi qui provident quibusdam voluptatum nisi rem molestias cum necessitatibus natus officia? Similique nobis laudantium aliquid ab est incidunt officiis magnam deserunt quod aspernatur dolorem quos error facilis sit voluptatum mollitia amet
dolor, harum voluptatibus illum perferendis! Temporibus, debitis repudiandae ratione eum a cumque aperiam consectetur. Nemo itaque dolores assumenda vel quos consectetur commodi! Delectus magni ab, omnis, quidem nostrum at voluptate aliquid quisquam
obcaecati accusantium recusandae voluptatum necessitatibus molestias ea rerum temporibus nesciunt optio consequatur corrupti sint quia et deserunt porro. Numquam, natus asperiores. Laborum at ex unde asperiores, dolor fugiat natus. Placeat, modi!
Impedit excepturi reprehenderit dolorem voluptate. Soluta!</p>
<h4 id="two">two</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam inventore magnam sint! Numquam culpa totam neque hic perferendis saepe. Nobis quasi architecto quidem quae facere ducimus blanditiis sequi, deleniti culpa, voluptatibus exercitationem!
Impedit, quaerat voluptatibus! Eum dicta expedita odit ipsa laborum culpa laboriosam quas quod magnam mollitia sapiente quis quia odio nesciunt accusamus aperiam eos omnis, earum officiis beatae soluta. Perferendis enim fuga hic iusto. Eos, vel
voluptatibus. Nobis, excepturi veniam incidunt porro ipsam facere, dolor quis nihil quod recusandae, perferendis voluptas et. Distinctio accusantium laboriosam animi quidem! Quo sunt quis suscipit asperiores accusantium ea, voluptate excepturi fugit
porro quasi qui provident quibusdam voluptatum nisi rem molestias cum necessitatibus natus officia? Similique nobis laudantium aliquid ab est incidunt officiis magnam deserunt quod aspernatur dolorem quos error facilis sit voluptatum mollitia amet
dolor, harum voluptatibus illum perferendis! Temporibus, debitis repudiandae ratione eum a cumque aperiam consectetur. Nemo itaque dolores assumenda vel quos consectetur commodi! Delectus magni ab, omnis, quidem nostrum at voluptate aliquid quisquam
obcaecati accusantium recusandae voluptatum necessitatibus molestias ea rerum temporibus nesciunt optio consequatur corrupti sint quia et deserunt porro. Numquam, natus asperiores. Laborum at ex unde asperiores, dolor fugiat natus. Placeat, modi!
Impedit excepturi reprehenderit dolorem voluptate. Soluta!</p>
<h4 id="three">three</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam inventore magnam sint! Numquam culpa totam neque hic perferendis saepe. Nobis quasi architecto quidem quae facere ducimus blanditiis sequi, deleniti culpa, voluptatibus exercitationem!
Impedit, quaerat voluptatibus! Eum dicta expedita odit ipsa laborum culpa laboriosam quas quod magnam mollitia sapiente quis quia odio nesciunt accusamus aperiam eos omnis, earum officiis beatae soluta. Perferendis enim fuga hic iusto. Eos, vel
voluptatibus. Nobis, excepturi veniam incidunt porro ipsam facere, dolor quis nihil quod recusandae, perferendis voluptas et. Distinctio accusantium laboriosam animi quidem! Quo sunt quis suscipit asperiores accusantium ea, voluptate excepturi fugit
porro quasi qui provident quibusdam voluptatum nisi rem molestias cum necessitatibus natus officia? Similique nobis laudantium aliquid ab est incidunt officiis magnam deserunt quod aspernatur dolorem quos error facilis sit voluptatum mollitia amet
dolor, harum voluptatibus illum perferendis! Temporibus, debitis repudiandae ratione eum a cumque aperiam consectetur. Nemo itaque dolores assumenda vel quos consectetur commodi! Delectus magni ab, omnis, quidem nostrum at voluptate aliquid quisquam
obcaecati accusantium recusandae voluptatum necessitatibus molestias ea rerum temporibus nesciunt optio consequatur corrupti sint quia et deserunt porro. Numquam, natus asperiores. Laborum at ex unde asperiores, dolor fugiat natus. Placeat, modi!
Impedit excepturi reprehenderit dolorem voluptate. Soluta!</p>
</div>
</body>引导文档指出：
所有 Bootstrap 的 JavaScript 文件都依赖于 util.js它必须与其他 JavaScript 文件一起包含。如果您使用的是编译(或缩小(引导.js，则无需包含此内容 - 它已经存在。
但是我得到了答案，我应该从实用程序中添加scrollspy。
你好好添加滚动.js 在这里你可以找到所有 Bootstrap 的 JavaScript 文件： https://cdnjs.com/libraries/twitter-bootstrap/4.0.0-alpha
为了使导航粘在顶部，请添加此css
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-fixed-bottom, .navbar-fixed-top {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-fixed-bottom, .navbar-fixed-top {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
</style>
</head>
<body data-spy="scroll">
<div class="bd-example">
<nav id="navbar-example2" class="navbar navbar-fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#fat">@fat</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mdo">@mdo</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#one">one</a>
<a class="dropdown-item active" href="#two">two</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#three">three</a>
</div>
</li>
</ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0" class="scrollspy-example">
<h4 id="fat">@fat</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<h4 id="mdo">@mdo</h4>
<p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>
<h4 id="one">one</h4>
<p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.</p>
<h4 id="two">two</h4>
<p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.</p>
<h4 id="three">three</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/umd/scrollspy.js" ></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html> You nead to add scrollspy.js
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-fixed-bottom, .navbar-fixed-top {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
</style>
</head>
<body data-spy="scroll">
<div class="bd-example">
<nav id="navbar-example2" class="navbar navbar-fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#fat">@fat</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mdo">@mdo</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#one">one</a>
<a class="dropdown-item active" href="#two">two</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#three">three</a>
</div>
</li>
</ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0" class="scrollspy-example">
<h4 id="fat">@fat</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<h4 id="mdo">@mdo</h4>
<p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>
<h4 id="one">one</h4>
<p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.</p>
<h4 id="two">two</h4>
<p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.</p>
<h4 id="three">three</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/umd/scrollspy.js" ></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>