最近闲来无事，多封装些功能性组件。后期会有更多放出来，大家可以多关注一下。
先上参数：
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的垂直滚动触发器，多参数可设置。
原文地址：http://www.cnblogs.com/pomelott/p/7487041.html