                        課程
                    
                        /前端開發
                        
                            /Bootstrap
                        
                        /玩轉Bootstrap（JS插件篇）

求大牛教，關于滾動監視器的問題！做不出百度百科的效果（不指百度百科的外觀樣式）！

【問題已解決√：《position屬性absolute與relative 詳解》：http://www.cnblogs.com/jenry/archive/2007/07/15/818660.html】

問題一：滾動監視器使用時為什么，導航欄的激活效果不與標題出現的位置同步，做不到百度百科的效果！

問題二：如果[滾動監視器的代碼在整個網頁中位于后半段位置]，在滾動過程中會出現“跳躍”，就是激活的效果只在導航的第一個鏈接（@fat）和最后一個鏈接（three）上跳躍顯示。

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="utf-8">
????<meta?http-equiv="X-UA-Compatible"?content="IE=edge">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<title>JS?for?Bootstrap</title>
????<link?rel="stylesheet"?>
????????<!--[if?lt?IE?9]>
????????????<script?src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
????????????<script?src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
????????<![endif]-->
</head>
<style?type="text/css">
????.scrollspy-content{
????????height:300px;
????????font-size:24px;
????????overflow:auto;????
????}
</style>
<body>
<div?class="container">
????????<h2>滾動監視器</h2>
????????????<div?class="scrollspy">
????????????????<nav?class="navbar?navbar-default"?role="navigation"?id="navbar-menu1">
????????????????????<div?class="container-fluid">
????????????????????????<div?class="navbar-header">
????????????????????????????<a?href="#"?class="navbar-brand">慕課網</a>
????????????????????????????<button?type="button"?class="navbar-toggle?collapsed"?data-toggle="collapse"?data-target=".navbar-content">
????????????????????????????????<span?class="sr-only">Toggle?Navigation</span>
????????????????????????????????<span></span>
????????????????????????????????<span></span>
????????????????????????????????<span></span>
????????????????????????????</button>
????????????????????????</div>
????????????????????????<div?class="collapse?navbar-collapse?navbar-content">
????????????????????????????<ul?class="nav?navbar-nav">
????????????????????????????????<li><a?href="#fat">@fat</a></li>
????????????????????????????????<li><a?href="#mdo">@mdo</a></li>
????????????????????????????????<li?class="dropdown">
????????????????????????????????????<a?href="#"?role="button"?data-toggle="dropdown">Dropdown<span></span></a>
????????????????????????????????????<ul?class="dropdown-menu"?role="menu">
????????????????????????????????????????<li><a?href="#one">one</a></li>
????????????????????????????????????????<li><a?href="#two">two</a></li>
????????????????????????????????????????<li><a?href="#three">three</a></li>
????????????????????????????????????</ul>
????????????????????????????????</li>
????????????????????????????</ul>
????????????????????????</div>
????????????????????</div>
????????????????</nav>
????????????????<div?class="scrollspy-content"?data-offset="0"?data-target="#navbar-menu1"?data-spy="scroll">
????????????????????<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>
????????????????</div>
????????????</div>
</div>
<script?src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<!--<script?src="../js/3.1.1/bootstrap.min.js"></script>-->
<script?src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>