基于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");
            }
    })

 

posted @ 2017-09-06 21:23  TateWang  阅读(282)  评论(0编辑  收藏  举报
Top