                        課程
                    
                        /前端開發(fā)
                        
                            /Bootstrap
                        
                        /玩轉(zhuǎn)Bootstrap（JS插件篇）

為什么在導(dǎo)航條上未出現(xiàn)滾動監(jiān)視的效果？

<!DOCTYPE?HTML>
<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8">
<title>下拉菜單--屬性聲明式方法（一）</title>
<link?rel="stylesheet"?>
<style>
.scrollspy-example{
????height:500px;
????font-size:20px;
????overflow:auto;
}
</style>
</head>
<body>
<div?class="bs-docs-section">
??<h1?class="page-header"?id="scrollspy">ScrollSpy?<small>scrollspy.js</small></h1>
??<h2?id="scrollspy-examples">Example?in?navbar</h2>
??<p>The?ScrollSpy?plugin?is?for?automatically?updating?nav?targets?based?on?scroll?position.?Scroll?the?area?below?the?navbar?and?watch?the?active?class?change.?The?dropdown?sub?items?will?be?highlighted?as?well.</p>
??<div?class="bs-example">
????<nav?role="navigation"?class="navbar?navbar-default?navbar-static"?id="navbar-example2">
??????<div?class="container-fluid">
????????<div?class="navbar-header">
??????????<button?data-target=".bs-example-js-navbar-scrollspy"?data-toggle="collapse"?type="button"?class="navbar-toggle?collapsed">
????????????<span?class="sr-only">Toggle?navigation</span>
????????????<span?class="icon-bar"></span>
????????????<span?class="icon-bar"></span>
????????????<span?class="icon-bar"></span>
??????????</button>
??????????<a?href="#"?class="navbar-brand">Project?Name</a>
????????</div>
????????<div?class="collapse?navbar-collapse?bs-example-js-navbar-scrollspy">
??????????<ul?class="nav?navbar-nav">
????????????<li><a?href="#fat">@fat</a></li>
????????????<li><a?href="#mdo">@mdo</a></li>
????????????<li?class="dropdown">
??????????????<a?aria-expanded="false"?role="button"?data-toggle="dropdown"?class="dropdown-toggle"?id="navbarDrop1"?href="#">Dropdown?<span?class="caret"></span></a>
??????????????<ul?aria-labelledby="navbarDrop1"?role="menu"?class="dropdown-menu">
????????????????<li><a?tabindex="-1"?href="#one">one</a></li>
????????????????<li><a?tabindex="-1"?href="#two">two</a></li>
????????????????<li?class="divider"></li>
????????????????<li><a?tabindex="-1"?href="#three">three</a></li>
??????????????</ul>
????????????</li>
??????????</ul>
????????</div>
??????</div>
????</nav>
????<div?class="scrollspy-example"?data-offset="0"?data-target="#navbar-example2"?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>
??????<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><!--?/example?-->


</div>
<script?src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script?src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>?
</body>
</html>