2-9 滚动监控器--JavaScript方法触发滚动监控器
本节编程练习不计算学习进度,请电脑登录imooc.com操作

滚动监控器--JavaScript方法触发滚动监控器

在Bootstrap框架中,使用JavaScript方法触发滚动监控器相对来说较为简单,只需要指定两个容器的名称即可。比如下面的结构:

<nav id="navbar-menu" class="navbar navbar-default navbar-static" role="navigation">
  …
</nav>
<div class="scrollspy" id="scrollspy">
  …
</div>

JavaScript触发可以这样写:

$(function(){
    $("#scrollspy").scrollspy({
        target: "#navbar-menu"
    });
})

Bootstrap的滚动监控还提供了一个方法scrollspy("refresh")。当滚动监控所作用的DOM有增加或删除页面元素的操作时,需要调用下面的refresh方法:

$(function(){
    $("[data-spy='scroll']").each(function(){
        var $spy=$(this).scrollspy("refresh");
    })
})

需要注意的是,这种refresh方法只对声明式用法有效。另外滚动监控除了options参数“target”之外,还提供了一个offset参数,此参数默认值为10。默认情况下,滚动内容距离滚动容器10px以内的话,就高一片面前显示所对应的菜单项。

任务

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>下拉菜单--属性声明式方法(一)</title>
  6. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  7. <style>
  8. .scrollspy-example{
  9. height:500px;
  10. font-size:20px;
  11. overflow:auto;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <div class="bs-docs-section">
  17. <h1 class="page-header" id="scrollspy">ScrollSpy <small>scrollspy.js</small></h1>
  18. <h2 id="scrollspy-examples">Example in navbar</h2>
  19. <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>
  20. <div class="bs-example">
  21. <nav role="navigation" class="navbar navbar-default navbar-static" id="navbar-example2">
  22. <div class="container-fluid">
  23. <div class="navbar-header">
  24. <button data-target=".bs-example-js-navbar-scrollspy" data-toggle="collapse" type="button" class="navbar-toggle collapsed">
  25. <span class="sr-only">Toggle navigation</span>
  26. <span class="icon-bar"></span>
  27. <span class="icon-bar"></span>
  28. <span class="icon-bar"></span>
  29. </button>
  30. <a href="#" class="navbar-brand">Project Name</a>
  31. </div>
  32. <div class="collapse navbar-collapse bs-example-js-navbar-scrollspy">
  33. <ul class="nav navbar-nav">
  34. <li><a href="#fat">@fat</a></li>
  35. <li><a href="#mdo">@mdo</a></li>
  36. <li class="dropdown">
  37. <a aria-expanded="false" role="button" data-toggle="dropdown" class="dropdown-toggle" id="navbarDrop1" href="#">Dropdown <span class="caret"></span></a>
  38. <ul aria-labelledby="navbarDrop1" role="menu" class="dropdown-menu">
  39. <li><a tabindex="-1" href="#one">one</a></li>
  40. <li><a tabindex="-1" href="#two">two</a></li>
  41. <li class="divider"></li>
  42. <li><a tabindex="-1" href="#three">three</a></li>
  43. </ul>
  44. </li>
  45. </ul>
  46. </div>
  47. </div>
  48. </nav>
  49. <div class="scrollspy-example" data-offset="0" data-target="#navbar-example2" data-spy="scroll">
  50. <h4 id="fat">@fat</h4>
  51. <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>
  52. <h4 id="mdo">@mdo</h4>
  53. <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>
  54. <h4 id="one">one</h4>
  55. <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>
  56. <h4 id="two">two</h4>
  57. <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>
  58. <h4 id="three">three</h4>
  59. <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>
  60. <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.
  61. </p>
  62.  
  63. </div>
  64. </div><!-- /example -->
  65.  
  66.  
  67. </div>
  68. <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  69. <script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-dropdown.min.js"></script>
  70. </body>
  71. </html>
下一节