Bootstrap JavaScript插件:滚动监听 (scrollspy.js)

简介: Bootstrap 框架

作者:WangMin
格言:努力做好自己喜欢的每一件事

banner.png

滚动监听插件是用来根据滚动条所处的位置来自动更新导航项的。滚动导航条下面的区域并关注导航项的变化。下拉菜单中的条目也会自动高亮显示。

用法

注意:

  • 依赖 Bootstrap 的导航组件
    滚动监听插件依赖 Bootstrap 的导航组件 用于高亮显示当前激活的链接。
  • 导航栏链接必须有可解析的id目标。例如,<a href=“#home”>home</a>必须对应于DOM中的某些内容,如<div id=“home”></div>

1. 需要相对定位(relative positioning)

滚动监听都需要被监听的组件是position: relative;即相对定位方式。一般我们监听的都是body,所以直接给body一个相对定位

2. 通过 data 属性调用

将data-spy=“scroll”添加到要监视的元素(最典型的是

)。然后使用任何Bootstrap.nav组件的父元素的ID或类添加datatarget属性。如下:
body {
   
   
  position: relative;
}
<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

3. 通过 JavaScript 调用

在 CSS 中添加position: relative;之后,通过 JavaScript 代码启动滚动监听插件

$('body').scrollspy({
   
    target: '#navbar-example' })

方法

当使用滚动监听插件的同时在 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…
})

就先分享到这里!! :smile: 后续继续更新!!

目录
相关文章
|
29天前
|
JavaScript 前端开发 API
释放 Node.js 的力量:服务器端 JavaScript 综合指南
释放 Node.js 的力量:服务器端 JavaScript 综合指南
20 0
|
1月前
|
JavaScript 前端开发 程序员
程序员必备技能之JS模块化,改变你的JavaScript开发方式!(一)
程序员必备技能之JS模块化,改变你的JavaScript开发方式!
|
1月前
|
JavaScript 前端开发 API
【JavaScript】<JS内建对象>JavaScript内建对象-Array对象
【1月更文挑战第17天】【JavaScript】<JS内建对象>JavaScript内建对象-Array对象
|
25天前
|
机器学习/深度学习 前端开发 JavaScript
源映射错误:Error: request failed with status 404 源 URL:http://localhost:8080/bootstrap/js/axios-0.18.0.js
源映射错误:Error: request failed with status 404 源 URL:http://localhost:8080/bootstrap/js/axios-0.18.0.js
19 0
源映射错误:Error: request failed with status 404 源 URL:http://localhost:8080/bootstrap/js/axios-0.18.0.js
|
16天前
|
JavaScript 前端开发 Java
MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。
MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 和 Ext JS 都是 JavaScript 框架,用于开发 Web 应用程序。它们分别提供了不同的功能和特性,以帮助开发者更高效地构建和维护 Web 应用程序。
11 2
|
29天前
|
前端开发 JavaScript 定位技术
Flutter vs 前端 杂谈:SliverAppBar、手动实现Appbar、前端Html+JS怎么实现滚动变化型Appbar - 比较
Flutter vs 前端 杂谈:SliverAppBar、手动实现Appbar、前端Html+JS怎么实现滚动变化型Appbar - 比较
26 0
|
1月前
|
移动开发 JavaScript 前端开发
分享36个JS滚动,29个JS进度条,12个JS日历代码,总有一款适合您
分享36个JS滚动,29个JS进度条,12个JS日历代码,总有一款适合您
16 0
|
1月前
|
Web App开发 JavaScript 前端开发
程序员必备技能之JS模块化,改变你的JavaScript开发方式!(二)
程序员必备技能之JS模块化,改变你的JavaScript开发方式!
|
1月前
|
JavaScript 前端开发 C++
给初学者的JavaScript入门指南及通俗的JS变量解释
给初学者的JavaScript入门指南及通俗的JS变量解释
89 0
|
1月前
|
开发框架 JavaScript 前端开发
React.js:改变Web开发方式的JavaScript库
React.js:改变Web开发方式的JavaScript库
25 1

相关产品

  • 云迁移中心