Bootstrap3 滚动监听插件的调用方式
滚动监听插件的调用方式
无论何种实现方式,滚动监听都需要被监听的组件是position: relative;
即相对定位方式。大多数时候是监听<body>
元素。
1、data属性调用
只需给你想监听的元素定义 data-spy="scroll" 属性和 data-target 属性。并把data-target 属性的值设置为监听对象的 id 即可。如:
<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 上开源。
Bootstrap3 滚动监听插件的调用方式相关推荐
- Bootstrap3 滚动监听插件的方法
滚动监听插件的方法 通过 JavaScript 调用滚动监控插件时,如果监听对象的DOM节点有增删元素的操作,则需要调用 .scrollspy('refresh') 方法来更新DOM. <scr ...
- Bootstrap3 滚动监听插件的事件
滚动监听插件的事件 Bootstrap为滚动监听插件提供了一个事件 activate.bs.scrollspy,每当一个新的导航项目被激活时,就会触发该事件,并自动为导航条的相应菜单项添加了一个 .a ...
- Bootstrap3 滚动监听插件的选项
滚动监听插件的选项 Bootstrap为滚动监听插件提供了一个选项 offset,用来调整滚动位置距顶部偏移的像素值,取值为数字,默认值为10.正值表示滚动条向上偏移,负值表示向下偏移. offset ...
- Bootstrap3 滚动监听的使用方法
滚动监听 Bootstrap的滚动监听插件(scrollspy.js)能够根据滚动的位置,自动更新导航条中相应的导航项. 什么是滚动监听?先看一个简单的例子:假设页面上有两个区域,一个是导航区域,一个 ...
- Bootstrap 滚动监听插件Scrollspy 的事件
事件 Bootstrap滚动监听插件Scrollspy提供了一个事件 activate,每当一个新的导航项目被激活时,就会触发该事件,并自动为导航条的相应菜单项添加了一个 .active 类,让它高亮 ...
- Bootstrap 滚动监听插件Scrollspy 的选项
选项 Bootstrap滚动监听插件Scrollspy提供了一个选项 offset,用来调整滚动位置距顶部偏移的像素值,取值为数字,默认值为10.正值表示滚动条向上偏移,负值表示向下偏移. 所有的选项 ...
- Bootstrap 滚动监听插件Scrollspy 的方法
方法 通过 JavaScript 调用滚动监控插件时,如果监听对象的DOM节点有增删元素的操作,则需要调用 .scrollspy('refresh') 方法来更新DOM. <script> ...
- jQuery滚动监听插件Waypoints
你是否希望当用户仅仅滚动滑条的时候,就能触发各种各样的动态效果呢?比如图片浮现.文字漂移等各种各样的动画!那么我就推荐你一款用于捕获各种滚动事件的插件-Waypoints.同时Waypoints还支持 ...
- vue滚动监听插件 vue-waypoint
1.安装依赖: npm install vue-waypoint --save-dev 2.使用: 在main.js中: import Vue from 'vue' import VueWaypoin ...
最新文章
- 你会去创建一个线程去处理压缩日志并删除吗?
- 求难、求拙、求慢、求少
- 你必须非常努力,才可以看起来毫不费力。
- sts从mysql数据库中反向生成实体类
- 2017苏州太湖国际马拉松 半程成绩单
- java string类型_java中String类型
- 前端学习(1362):学生档案信息管理4
- 基础知识(一)matlab与c++混合编程之环境搭建
- 【JS】call,apply,bind
- div+css中常见的问题
- [转]详细解说:简单CSS3实现炫酷读者墙
- English trip V1 - 20.Look at me 看着我 Teacher:Solo Key: 声调(英语默认就声调[rising]和降调[falling]两种)...
- 费马定理中值定理_长盛不衰的法国数学|费马
- SM2258XT量产工具教程,SM2258XT_Q0816A+B05 B16 B17的正确开卡步骤
- html中的特殊符号表示法
- markdown如何设置图片大小_cnblogs文章/MarkDown内如何调整图片的宽度?
- 信息服务器v6,服务器ipv6设置
- allegro artwork设置和颜色设置的导入导出
- matlab多重心法,多重心法例.ppt
- arm 中的nor flash 和 nand flash
热门文章
- Advanced Threat Analytics 2016
- LINQ找出重复和不重复的元素及linq OrderBy 方法 两个字段同时排序有关问题
- SSH远程管理OpenSSH使用
- Django错误解决: CSRF verification failed. Request abor
- 通过Redis的Pub/Sub实现对服务器群的监控管理
- 如何改变标题栏的宽度
- 程序员的算法课(3)-递归(recursion)算法
- 程序员的进阶课-架构师之路(17)-堆
- Linux服务器非root用户下安装CUDA11.1和cudnn到指定目录
- 学习笔记(2):uni-app实战社区交友类app开发-引入css动画库