本文共 3654 字，大约阅读时间需要 12 分钟。
最近闲来无事，多封装些功能性组件。后期会有更多放出来，大家可以多关注一下。
先上参数：
type:"show", 默认为“show”，“show”意为当能够在可视区看到指定位置的节点时触发，“scroll”意为浏览器滚动过指定结点时触发。
pos:"#scrollBox", 默认为"#scrollBox"，通过此结点获取指定位置。 delayDistance:0, 在指定位置的上下浮动距离，单位为像素，可为负值。 single:true, 是否只触发一次。 true（是）、false（不是） passCallback:function(){}, 超过指定位置的触发函数。 backCallback:function(){} 小于指定位置时的触发函数。demo如下：
1.html
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"); } })
转载地址：http://wiufz.baihongyu.com/