Bootstrap 滚动监听Scrollspy 调用方式
调用方式
1、data属性调用
只需给监听对象定义 data-spy="scroll" 属性及 data-target 属性,就可以激活滚动监听插件。
data-target 属性的值是一个选择器,它指向拥有滚动监听功能的页面元素。本实例中,拥有滚动监听功能的页面元素为 id="navbarExample" 的导航包含框。则监听对象的 data 属性定义如下:
<div data-spy="scroll" data-target="#navbarExample">
<h4 id="fat">@fat</h4>
<p>Ad leggings keytar, brunch id art ...</p>
<h4 id="mdo">@mdo</h4>
<p>Veniam marfa mustache ...</p>
...
</div>
2、JavaScript调用
直接为拥有滚动监听功能的页面元素绑定 scrollspy() 方法即可:
<script>
$('#navbarExample').scrollspy()
</script>
关于作者
歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。
Bootstrap 滚动监听Scrollspy 调用方式相关推荐
- Bootstrap 滚动监听插件Scrollspy 的事件
事件 Bootstrap滚动监听插件Scrollspy提供了一个事件 activate,每当一个新的导航项目被激活时,就会触发该事件,并自动为导航条的相应菜单项添加了一个 .active 类,让它高亮 ...
- Bootstrap 滚动监听插件Scrollspy 的选项
选项 Bootstrap滚动监听插件Scrollspy提供了一个选项 offset,用来调整滚动位置距顶部偏移的像素值,取值为数字,默认值为10.正值表示滚动条向上偏移,负值表示向下偏移. 所有的选项 ...
- Bootstrap 滚动监听
滚动监听 Bootstrap滚动监听插件Scrollspy能够根据滚动的位置,自动更新导航条中相应的导航项. 滚动监听插件需要 bootstrap-scrollspy.js 文件支持,在使用该插件之前 ...
- Bootstrap 滚动监听插件Scrollspy 的方法
方法 通过 JavaScript 调用滚动监控插件时,如果监听对象的DOM节点有增删元素的操作,则需要调用 .scrollspy('refresh') 方法来更新DOM. <script> ...
- Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
Bootstrap4 1.网络系统 规则 屏幕最多分为12列(同一行数字相加应为12) 用行来创建水平的列组 为自动设置外边距内边距,需将网格每一行需要放在设置了 .container (固定宽度) ...
- Bootstrap3 滚动监听插件的调用方式
滚动监听插件的调用方式 无论何种实现方式,滚动监听都需要被监听的组件是position: relative;即相对定位方式.大多数时候是监听<body>元素. 1.data属性调用 只需给 ...
- bootstrap源码之滚动监听组件scrollspy.js详解
其实滚动监听使用的情况还是很多的,比如导航居于右侧,当主题内容滚动某一块的时候,右侧导航对应的要高亮. 实现功能 1.当滚动区域内设置的hashkey距离顶点到有效位置时,就关联设置其导航上的指定项 ...
- bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象
轮播图: bootstrap封装了轮播图的功能,其具体如下: 类名 描述 .carousel 创建一个轮播图块的容器,实质是做布局用:且此容器应该有一个di属性,其属性值提供给下面左右按钮href锚点 ...
- 4.18、Bootstrap V4自学之路-----内容---滚动监听
为什么80%的码农都做不了架构师?>>> 总体来说,用起来不是特别满意,先放一放吧. 导航条示例 滚动监听插件会根据滚动的位置,自动更新导航条的目标.滚动在导航条下面的区域,查 ...
最新文章
- 30段极简Python代码:这些小技巧你都Get了么
- java gridbag_java – 调整Gridbag布局
- pat 1025 反转链表
- 使用Sqlmap对dvwa进行sql注入测试(初级阶段)
- 工业镜头选型计算公式_变压器分接开关选型指南
- [BZOJ1635][Usaco2007 Jan]Tallest Cow 最高的牛
- wordpress不登陆后台禁用插件
- (三)Web框架-龙卷风Tornado之快速上手
- 迅捷caj转word转换器怎么用
- ipv6正则表达式 java_正则表达式,匹配所有有效格式的IPv6地址
- Pycharm中不显示latest version
- Ajax中的 “success” 与 “error ”回调函数何时调用 ?
- 四成单身、平均年薪19万、最爱买房,原来真实的程序员是这个样子的…...
- 三极管原理,开关电路设计原则,NPN、PNP区别及常用三极管参数
- python中如何移动图形工作站_Schrodinger分子动力模拟与建模工作站配置推荐
- 【Android】网页广告植入规避方案
- 学模具好还是计算机网络好,模具编程要学多久才会?多长时间能学好?
- Python实现整蛊、木马等黑客软件!
- 前端科普系列(1):前端简史
- 〖Python接口自动化测试实战篇⑩〗- 测试框架 unittest 的小实战案例
热门文章
- Oracle之锁表问题
- Ant部署测试出错(关键字:Ant NoClassDefFoundError xml-apis/jar)
- 程序员的算法课(15)-分治法获取文件中出现频次最高100词
- Synchronized的使用详解与区别(干货满满!!!)
- android 获取文件夹的字节数,android java file 清理垃圾获取文件大小 删除文件等操作...
- java B2B2C源码电子商务平台 --zuul跨域访问问题
- 突破技术管理,IT人中年危机变契机
- python技能(1)-map函数
- android中tools的含义及用法
- 基于Spring Boot的Logback日志轮转配置