最近闲来无事，多封装些功能性组件。后期会有更多放出来，大家可以多关注一下。
先上参数：
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");
}
})
时间： 2024-11-05 18:28:32