在Web頁面中實現(xiàn)Bootstrap滾動監(jiān)控器其實非常簡單，接下來我們一步一步來看滾動監(jiān)控器是如何設(shè)計的。
第一步：使用滾動監(jiān)控器，首要的條件是在頁面中加載對應(yīng)的插件。在這里你可以加載合并好的bootstrap.js或者其獨立的插件文件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)航條和下拉菜單項定義一個錨點鏈接，錨點分別為“#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)航菜單項中的錨點鏈接名相對應(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大?。ㄔO(shè)置高度目的是為了產(chǎn)生垂直滾動條）。
.scrollspy{
height:500px;
font-size:20px;
overflow:auto;
}
我來試試：補充缺少代碼
右側(cè)代碼只是實現(xiàn)了錨點跳轉(zhuǎn)功能，但沒有實現(xiàn)“滾動監(jiān)控器”功能，補充右側(cè)編輯器缺少的代碼以實現(xiàn)滾動監(jiān)控器的功能。
注意：補充49行？？？區(qū)代碼。
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報