在Web頁面中實現Bootstrap滾動監控器其實非常簡單，接下來我們一步一步來看滾動監控器是如何設計的。
第一步：使用滾動監控器，首要的條件是在頁面中加載對應的插件。在這里你可以加載合并好的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>
第二步：設計一個帶有下拉菜單的導航條。分別為導航條和下拉菜單項定義一個錨點鏈接，錨點分別為“#blog”,“html”,“#css”,“#sass”,“#js”,“php”,“#about”。同時為導航條定義一個id值“navbar-menu”（id名稱可自由定義），方便滾動監控。
第三步：設計監控對象。這里將監控對象內容都放置在一個div名為scrollspy（這個類名可自由定義）的容器中，其中放了多個子內容框。每個子內容框有一個標題，而且每個標題的ID值與導航菜單項中的錨點鏈接名相對應，并且注意加入“data-target="#navbar-menu"”屬性（這個屬性值要與前面的nav標簽的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>
第四步：為監控對象定義樣式，設置容器scrollspy大?。ㄔO置高度目的是為了產生垂直滾動條）。
.scrollspy{
height:500px;
font-size:20px;
overflow:auto;
}
我來試試：補充缺少代碼
右側代碼只是實現了錨點跳轉功能，但沒有實現“滾動監控器”功能，補充右側編輯器缺少的代碼以實現滾動監控器的功能。
注意：補充49行？？？區代碼。
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報