基于jquery的垂直滚动触发器，多参数可设置。
最近闲来无事，多封装些功能性组件。后期会有更多放出来，大家可以多关注一下。
先上参数：
type:"show", 默认为“show”，“show”意为当能够在可视区看到指定位置的节点时触发，“scroll”意为浏览器滚动过指定结点时触发。
pos:"#scrollBox", 默认为"#scrollBox"，通过此结点获取指定位置。
delayDistance:0, 在指定位置的上下浮动距离，单位为像素，可为负值。
single:true, 是否只触发一次。 true（是）、false（不是）
passCallback:function(){}, 超过指定位置的触发函数。
backCallback:function(){} 小于指定位置时的触发函数。
demo如下：
1.html
<body style="height: 6000px;"> <div style="height: 1000px;background:#ff0"></div>
<div id="trigger1" style="height: 1500px;background: #f00;"></div> </div>
2.js(组件)
function scrollTrigger(obj){
this.set={
type:"show",
pos:"#scrollBox",
delayDistance:0,
single:true,
passCallback:function(){},
backCallback:function(){}
}
this.passFlag=false;
this.backFlag=false;
$.extend(this.set,obj)
var _this=this;
this.init=function(){
$(window).scroll(function(){
if(_this.set.type=="scroll"){
if($(window).scrollTop()>=$(_this.set.pos).offset().top+_this.set.delayDistance){
if(_this.set.single==true&&_this.passFlag==false){
_this.set.passCallback();
_this.passFlag=true;
}else if(_this.set.single==true&&_this.passFlag==true){
}else{
_this.set.passCallback();
}
}
if($(window).scrollTop()<$(_this.set.pos).offset().top+_this.set.delayDistance){
if(_this.set.single==true&&_this.backFlag==false){
_this.set.backCallback();
_this.backFlag=true;
}else if(_this.set.single==true&&_this.backFlag==true){
}else{
_this.set.backCallback();
}
}
}
if(_this.set.type=="show"){
if($(window).scrollTop()>=$(_this.set.pos).offset().top-$(window).height()+_this.set.delayDistance){
if(_this.set.single==true&&_this.passFlag==false){
_this.set.passCallback();
_this.passFlag=true;
}else if(_this.set.single==true&&_this.passFlag==true){
}else{
_this.set.passCallback();
}
}
if($(window).scrollTop()+$(window).height()<$(_this.set.pos).offset().top+_this.set.delayDistance){
if(_this.set.single==true&&_this.backFlag==false){
_this.set.backCallback();
_this.backFlag=true;
}else if(_this.set.single==true&&_this.backFlag==true){
}else{
_this.set.backCallback();
}
}
}
})
}
this.init();
}
3. js （调用）
var trigger1=new scrollTrigger({
type:"show",
pos:"#trigger1",
single:false,
delayDistance:0,
passCallback:function(){
console.log("pass");
},
backCallback:function(){
console.log("back");
}
})
基于jquery的垂直滚动触发器，多参数可设置。的更多相关文章
- 基于 jQuery 实现垂直滑动的手风琴效果
今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...
- 基于jQuery左侧小图滚动右侧大图显示代码
今天给大家分享一款 jQuery左侧小图滚动右侧大图显示代码是一款基于jQuery实现的左侧滚动图片点击大图查看效果代码.该实例适用浏览器:IE8.360.FireFox.Chrome.Safari. ...
- 基于jQuery实现页面滚动时顶部导航显示隐藏效果
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
- 基于jQuery封装的分页组件（可自定义设置）
jQuery封装的分页组件 前几天做了一个vue的组件分页,而现在需求是jquery的分页,我就根据我自己的需求写了一个.在网上找了很久的基于jquery的分页封装,可是都不是我想要的结果,那么今天我 ...
- jquery垂直滚动插件一个参数用于设置速度,兼容ie6
利用外层的块级元素负外边距来滚动 1.使用 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://ww ...
- 使用 jQuery.Pin 垂直滚动时固定导航
ZKEACMS的导航默认是不能固定的,随着页面的滚动而滚动,为了有更好的用户体验,当页面往下滚动时,可以将导航固定在顶端,这样方便用户点击. jQuery Pin 借助jQuery的一个插件 jQue ...
- 基于JQuery打造无缝滚动新闻
JQuery实现 新闻无缝滚动 一.使用"首尾追加"实现无缝滚动 <head lang="en"> <meta charset="U ...
- jQuery图片垂直滚动焦点图
在线演示 本地下载
- jQuery BreakingNews 间歇滚动
BreakingNews 是一款基于jQuery的间歇滚动插件.它可以设置标题.标题颜色.标题背景颜色.链接颜色.字体大小.边框.宽度.自动滚动.间歇时间等等,同时它还好提供两种过度方式--淡入淡出( ...
随机推荐
- asp.net mvc 全局权限过滤器及继成权限方法
全局权限过滤器 //----------------------------------------------------------------------- // <copyright f ...
- Hadoop基础-MapReduce的工作原理第二弹
Hadoop基础-MapReduce的工作原理第二弹 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Split(切片) 1>.MapReduce处理的单位(切片) 想必 ...
- 将Sql查询语句获取的数据插入到List列表里面
Sql查询语句获取的数据是分格式的,我们还用SqlDataReader来做,然后用IDataReader来接收读取,以下是代码: //我想查询一个用户表的信息,该用户有姓名,密码,信息三列 //1.定 ...
- IOS的属性和实例变量
实际上,@property声明的是属性,并不是实例变量.但是编译器会根据属性,自动生成实例变量,和对应的access方法.所以已经在interface里声明了@property,就不再需要在imple ...
- [软件]在浏览器里添加MarkDown Here(插件)
1. 先来说说这个插件的作用是什么: 用于在网页一些编辑文本的地方, 使用MacDown编辑文本 支持大部分浏览器, https://github.com/adam-p/markdown-here ...
- Eclipse的个性化设置
Eclipse的个性化设置 1. 在Eclipse中查看JDK源码的配置 a. 点 “window”-> "Preferences" -> "Java&quo ...
- 【原创】backbone1.1.0源码解析之Model
趁热打铁,将Backbone.Model的源代码注释也发出来. Model是用来干嘛的?写过mvc的同学应该都知道,说白了就是model实例用来存储数据表中的一行数据(row) Backbone利用m ...
- 关于SQL注入，你应该知道的那些事
戴上你的黑帽,现在我们来学习一些关于SQL注入真正有趣的东西.请记住,你们都好好地用这些将要看到的东西,好吗? SQL注入攻击因如下几点而是一种特别有趣的冒险: 1.因为能自动规范输入的框架出现,写出 ...
- ASP.NET MVC3-Music Store中英文教程 [下载]
翻译原文档名: MVC Music Store版本: ASP.NET MVC3概述Mvc Music Store 是一个为WEB开发人员一步一步介绍和解释如何使用MVC和Visual Web开发的应用 ...
- C++(vs)多线程调试 （转）
在一个程序中,这些独立运行的程序片断叫作“线程”(Thread),利用它编程的概念就叫作“多线程处理”.利用线程,用户可按下一个按钮,然后程序会立即作出响应,而不是让用户等待程序完成了当前任务以后 ...