在Web頁面中實(shí)現(xiàn)Bootstrap滾動監(jiān)控器其實(shí)非常簡單，接下來我們一步一步來看滾動監(jiān)控器是如何設(shè)計的。
第一步：使用滾動監(jiān)控器，首要的條件是在頁面中加載對應(yīng)的插件。在這里你可以加載合并好的bootstrap.js或者其獨(dú)立的插件文件scrollspy.js。這里以加載合并好的js為例：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
第二步：設(shè)計一個帶有下拉菜單的導(dǎo)航條。分別為導(dǎo)航條和下拉菜單項(xiàng)定義一個錨點(diǎn)鏈接，錨點(diǎn)分別為“#blog”,“html”,“#css”,“#sass”,“#js”,“php”,“#about”。同時為導(dǎo)航條定義一個id值“navbar-menu”（id名稱可自由定義），方便滾動監(jiān)控。
第三步：設(shè)計監(jiān)控對象。這里將監(jiān)控對象內(nèi)容都放置在一個div名為scrollspy（這個類名可自由定義）的容器中，其中放了多個子內(nèi)容框。每個子內(nèi)容框有一個標(biāo)題，而且每個標(biāo)題的ID值與導(dǎo)航菜單項(xiàng)中的錨點(diǎn)鏈接名相對應(yīng)，并且注意加入“data-target="#navbar-menu"”屬性（這個屬性值要與前面的nav標(biāo)簽的id名稱保持一致）
<div class="scrollspy" data-target="#navbar-menu"> <h4 id="blog">Blog</h4> <p>…</p> <h4 id="html">Html</h4> <p>…</p> <h4 id="css">CSS</h4> <p>…</p> <h4 id="sass">Sass</h4> <p>…</p> <h4 id="js">JavaScript</h4> <p>…</p> <p>…</p> <h4 id="php">PHP</h4> <p>…</p> <p>…</p> <h4 id="about">About</h4> <p>…</p> <p>…</p> </div>
第四步：為監(jiān)控對象定義樣式，設(shè)置容器scrollspy大小（設(shè)置高度目的是為了產(chǎn)生垂直滾動條）。
.scrollspy{
height:500px;
font-size:20px;
overflow:auto;
}
我來試試：補(bǔ)充缺少代碼
右側(cè)代碼只是實(shí)現(xiàn)了錨點(diǎn)跳轉(zhuǎn)功能，但沒有實(shí)現(xiàn)“滾動監(jiān)控器”功能，補(bǔ)充右側(cè)編輯器缺少的代碼以實(shí)現(xiàn)滾動監(jiān)控器的功能。
注意：補(bǔ)充49行？？？區(qū)代碼。
請驗(yàn)證，完成請求
由于請求次數(shù)過多，請先驗(yàn)證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報