滚动监听
导航条实例
滚动监听插件是用来根据滚动条所处的位置来自动更新导航项的。下拉菜单中的条目也会自动高亮显示。
用法
- 依赖Bootstrap的导航组件
滚动监听插件依赖Bootstrap的导航组件用于高度显示当前激活的连接 - 需要添加ID
导航栏连接必须具有可解析的id。例如，
<a href="#home">home</a>必须对应于DOM中的某些内容，如
<div id="home"></div>- 非：忽略可见的目标元素
根据jQuery可见的目标元素将被忽略，他们对应的nav项将永远不会突出显示。
需要相对定位（position：relative）
无论何种实现方式，滚动监听都需要被监听的组件是position:relative；即相对定位方式。大多数时候是监听<body>元素.当滚动监听除<body>之外的元素时，请确保设置了高度并应用overflow-y:scroll。
通过data属性调用
要想轻松的将scroll-spy行为添加到你的顶栏导航，请将data-spy='scroll' 添加到你要监听的元素（通常这是）。然后添加带有任何Bootstrap.nav组件的元素的ID或类的数据目标属性。
body{
position:relative;
}<body data-spy="scroll" data-target="#naxbar-example">
...
<div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body> 通过Javascript调用
在css中添加position:relative 之后，通过JavaScript代码启动滚动监听插件：
$('body').scrollspy({target:'#navbar-example'})方法
.scrollspy(‘refresh’)
当使用滚动监听插件的同时在DOM中添加或删除元素后，你需要像下面这样调用此刷新（refresh）方法：
$('[data-spy="scroll"]').each(function(){
var $spy=$(this).scrollspy('refresh')
})参数
可以通过data属性或JavaScript传递参数。对于data属性，其名称是将参数名附着到data- 后面组成，例如data-offset="" 。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| offset | number | 10 | 计算滚动位置时对于顶部的偏移量（像素数） |
事件
| 事件类型 | 描述 |
|---|---|
| activate.bs.scrollspy | 每当一个新条目被激活后都将由滚动监听插件出发此事件 |
$('#myScrollspy').on('activate.bs.scrollspy',function(){
//do something...
})
2196
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
