下面是我应用了scroll-spy引导程序组件的模板代码段。
下面的代码段确实将单击<a>标记和href的内容带入了内容，但是其容器并不像文档中所示那样粘滞。
根据引导文档，有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文档指出：
所有Bootstrap的JavaScript文件都取决于util.js，并且必须与其他JavaScript文件一起包含。如果您使用的是经过编译（或精简）的bootstrap.js，则无需包含它-它已经存在。
但是我得到的答案是我应该从utils中添加scrollspy。
答案 0 :(得分：0)
您需要添加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>