基于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的间歇滚动插件.它可以设置标题.标题颜色.标题背景颜色.链接颜色.字体大小.边框.宽度.自动滚动.间歇时间等等,同时它还好提供两种过度方式--淡入淡出( ...
随机推荐
- 【LOJ#10131】暗的锁链
题目大意:给定一个 N 个点无向图的一棵生成树和另外 M 条边,第一次去掉生成树中的一条边,第二次去掉另外 M 条边中的一条边,求有多少种情况可以使得给定的无向图不连通. 题解:首先考虑该生成树,若新 ...
- Mac 显示sudo: pip: command not found
Mac显示sudo: pip: command not found mac在安装完pip模块后,使用pip命令会提示sudo: pip: command not found moyanzhudeMac ...
- Linux上安装node和npm
说明:最近工作中需要用到react前端框架使得可以前后分离,在安装react之前呢我是需要先安装node,和npm的 由于npm是依赖于node 的,所以我这边只要安装了node后,npm也就安装完成 ...
- NO.4: 确定对象被使用前已被初始化
1.为内置对象进行 "手工初始化",因为C++不保证初始化他们(内置类型在赋值与初始化销毁基本相同,最好还是进行初始化列表),在内置类型过多情况下,可选择private函数统一初始 ...
- 关于ehcache配置中timeToLiveSeconds和timeToIdleSeconds的区别
在使用ehcache框架时,timeToLiveSeconds和timeToIdleSeconds这两个属性容易混淆,今天有空就记录一下,以防之后又忘记了. 首先来说明一下这两个属性分别有什么作用:( ...
- solr与mysql数据同步的方案
1.使用activeMQ http://blog.csdn.net/zhou2s_101216/article/details/77855413 2.通过配置实现定时同步 http://blog.cs ...
- bzoj千题计划269:bzoj2655: calc (拉格朗日插值)
http://www.lydsy.com/JudgeOnline/problem.php?id=2655 f[i][j] 表示[1,i]里选严格递增的j个数,序列值之和 那么ans=f[A][n] * ...
- CSS规范 - 分类方法--(来自网易)
CSS文件的分类和引用顺序 通常,一个项目我们只引用一个CSS,但是对于较大的项目,我们需要把CSS文件进行分类. 我们按照CSS的性质和用途,将CSS文件分成“公共型样式”.“特殊型样式”.“皮肤型 ...
- Django之初始庐山真面目
Django可以说是基于Python语言的一款非常成熟的框架,其功能之强大,应用之广泛,开发之便捷,可以说每一个细节都值得一赞 最重要的是,Django其实是我们学习Python过程中非常重要的部分之 ...
- sublime text 3 开启卡顿(win7)解决办法
启动sublime3,ctrl+~打开命令窗口,输入以下 { "update<em>check": false, "font</em>size&q ...