Bootstrap Scrollspy Plugin

来源：互联网发布：淘宝在哪里搜店铺? 编辑：程序博客网时间：2024/04/30 03:06

导航栏Scrollspy例子

<!-- The scrollable area --><body data-spy="scroll" data-target=".navbar" data-offset="50"><!-- The navbar - The <a> elements are used to jump to a section in the scrollable area --><nav class="navbar navbar-inverse navbar-fixed-top">...  <ul class="nav navbar-nav">    <li><a href="#section1">Section 1</a></li>    ...</nav><!-- Section 1 --><div id="section1">  <h1>Section 1</h1>  <p>Try to scroll this page and look at the navigation bar while scrolling!</p></div>...</body>

垂直Scrollspy例子

<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">  <div class="container">    <div class="row">      <nav class="col-sm-3" id="myScrollspy">        <ul class="nav nav-pills nav-stacked">          <li><a href="#section1">Section 1</a></li>          ...        </ul>      </nav>      <div class="col-sm-9">        <div id="section1">           <h1>Section 1</h1>          <p>Try to scroll this page and look at the navigation list while scrolling!</p>        </div>         ...      </div>    </div>  </div></body>

Scrollspy的使用

使用Scrollspy只需在对应的HTML元素里添加几个关键的属性：
- data-spy=”scroll”
添加到需要滚动的元素中，比如最常见的body元素，或者container。
- data-target=”selector”
添加到需要滚动的元素中，selector指示的是控制滚动的元素比如”.navbar”, “#myScrollspy”。
- <a href=”#section”>section</a>
在控制滚动的元素中用link链接到对应的位置。注意链接的id要跟对应位置元素的id相匹配。例如，<div id=”section1”>与<a href=”#seciton1”。

0 0