jQuery滚动监听插件Waypoints
你是否希望当用户仅仅滚动滑条的时候,就能触发各种各样的动态效果呢?比如图片浮现、文字漂移等各种各样的动画!那么我就推荐你一款用于捕获各种滚动事件的插件—Waypoints。同时Waypoints还支持固定元素和无限滚动的功能,功力十分强大。
演示Demo:
1.http://imakewebthings.com/jquery-waypoints/#get-started
2.固定元素http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/
3.无线滚动http://imakewebthings.com/jquery-waypoints/shortcuts/infinite-scroll/
下载:
1.官网:http://imakewebthings.com/jquery-waypoints/
2.GiHub:https://github.com/imakewebthings/jquery-waypoints
在使用Waypoints插件之前,首先需要包含一个jQery文件,然后包含下载的插件
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/waypoints.min.js"></script>
这个时候你就可以尽情的使用Waypoints插件了, 最简单的使用方法是调用.waypoint,并传递到一个函数中
$('#example-basic').waypoint(function() {notify('Basic example callback triggered.'); });
这个例子会在#example-basic的顶部刚碰到用户视角的顶部时出现一个提示,callback会在你经过这点设定点触发,不管你是向上滚动还是向下滚动. 大部分情况下我们想在用户向不同方向滚动时展现不同的动作。Waypoints将方向作为参数传递给回调函数
$('#example-direction').waypoint(function(direction) {notify('Direction example triggered scrolling ' + direction); });
这里通知将表现为”Direction example triggered scrolling down”或者”Direction example triggered scrolling up”.
要是你是想让waypoint在某个位置触发而不是你元素的顶部碰到视角的顶部怎么办?waypoint函数提供了第二种自变量—选项对象。其中最有用的是–offset,即告诉Waypoints要离开窗口顶部多远才触发。offset可以用像素来表示。
$('#example-offset-pixels').waypoint(function() {notify('100 pixels from the top'); }, { offset: 100 });
或者用比例来表示
$('#example-offset-percent').waypoint(function() {notify('25% from the top'); }, { offset: '25%' });
或者是一个函数,这个函数需要返回一个数字
$('#example-offset-function').waypoint(function() {notify('Element bottom hit window top'); }, {offset: function() {return -$(this).height();} });
来源:http://coolfun.me/waypoints/
另外还可以使用jquery插件: Bootstrap ScrollSpy 用法
参看:http://v2.bootcss.com/javascript.html
jQuery滚动监听插件Waypoints相关推荐
- Bootstrap3 滚动监听插件的事件
滚动监听插件的事件 Bootstrap为滚动监听插件提供了一个事件 activate.bs.scrollspy,每当一个新的导航项目被激活时,就会触发该事件,并自动为导航条的相应菜单项添加了一个 .a ...
- Bootstrap3 滚动监听插件的方法
滚动监听插件的方法 通过 JavaScript 调用滚动监控插件时,如果监听对象的DOM节点有增删元素的操作,则需要调用 .scrollspy('refresh') 方法来更新DOM. <scr ...
- Bootstrap3 滚动监听插件的选项
滚动监听插件的选项 Bootstrap为滚动监听插件提供了一个选项 offset,用来调整滚动位置距顶部偏移的像素值,取值为数字,默认值为10.正值表示滚动条向上偏移,负值表示向下偏移. offset ...
- Bootstrap3 滚动监听插件的调用方式
滚动监听插件的调用方式 无论何种实现方式,滚动监听都需要被监听的组件是position: relative;即相对定位方式.大多数时候是监听<body>元素. 1.data属性调用 只需给 ...
- Bootstrap 滚动监听插件Scrollspy 的事件
事件 Bootstrap滚动监听插件Scrollspy提供了一个事件 activate,每当一个新的导航项目被激活时,就会触发该事件,并自动为导航条的相应菜单项添加了一个 .active 类,让它高亮 ...
- Bootstrap 滚动监听插件Scrollspy 的选项
选项 Bootstrap滚动监听插件Scrollspy提供了一个选项 offset,用来调整滚动位置距顶部偏移的像素值,取值为数字,默认值为10.正值表示滚动条向上偏移,负值表示向下偏移. 所有的选项 ...
- Jquery滚动监听和附加导航
初学jquery,多多指教 导航思路: 设定nav导航的类. 设定索引值. 点击导航内容,导航的索引和内容的索引一一对应. 点击导航栏,内容滑动一段距离. 监听: 1.滑动内容文档时,索引值变动. 2 ...
- Bootstrap 滚动监听插件Scrollspy 的方法
方法 通过 JavaScript 调用滚动监控插件时,如果监听对象的DOM节点有增删元素的操作,则需要调用 .scrollspy('refresh') 方法来更新DOM. <script> ...
- vue滚动监听插件 vue-waypoint
1.安装依赖: npm install vue-waypoint --save-dev 2.使用: 在main.js中: import Vue from 'vue' import VueWaypoin ...
最新文章
- 算法分析与设计之多处最优服务次序问题2
- 使用python移动飞信模块发送短信
- java json对象 输出_拼json字符串输出java对象
- Android编程中dp、px和sp的区别
- CycleGAN与pix2pix详解
- 携程景区爬取 + 保存Excel
- 商品品牌信息的增删改查操作步骤_畅购商城(三):商品管理
- 太可怕,有码变高清!AI 一秒还原马赛克?
- 多种内网穿透工具的比较
- Linux查看磁盘存储空间大小
- 华云大咖说 | 华云数据与数科网维携手共建国产云生态
- ubuntu配置工作环境
- win10的IE闪退及“启用或关闭windows功能”里没有IE选项
- AAAI‘22 推荐系统论文梳理
- JuliaSetMandelBulb @ MayaKK —— 4亿粒子的测试
- office--word中插入visio流程图
- 特种光纤丨光谱分析仪用光纤
- 控制期货开户保证金可以降低风险
- PPP 模式在我国智慧城市建设领域应用与发展
- 调速器方案(智能数字显示)方案说明:可做6W~250W的单相电机数显智能调速器