博客
关于我
基于jquery的垂直滚动触发器,多参数可设置。
阅读量:449 次
发布时间:2019-03-06

本文共 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/

你可能感兴趣的文章
MySQL中的DECIMAL类型:MYSQL_TYPE_DECIMAL与MYSQL_TYPE_NEWDECIMAL详解
查看>>
MySQL中的GROUP_CONCAT()函数详解与实战应用
查看>>
MySQL中的IO问题分析与优化
查看>>
MySQL中的ON DUPLICATE KEY UPDATE详解与应用
查看>>
mysql中的rbs,SharePoint RBS:即使启用了RBS,内容数据库也在不断增长
查看>>
mysql中的undo log、redo log 、binlog大致概要
查看>>
Mysql中的using
查看>>
MySQL中的关键字深入比较:UNION vs UNION ALL
查看>>
mysql中的四大运算符种类汇总20多项,用了三天三夜来整理的,还不赶快收藏
查看>>
mysql中的字段如何选择合适的数据类型呢?
查看>>
MySQL中的字符集陷阱:为何避免使用UTF-8
查看>>
mysql中的数据导入与导出
查看>>
MySQL中的时间函数
查看>>
mysql中的约束
查看>>
MySQL中的表是什么?
查看>>
mysql中穿件函数时候delimiter的用法
查看>>
Mysql中索引的分类、增删改查与存储引擎对应关系
查看>>
Mysql中索引的最左前缀原则图文剖析(全)
查看>>
MySql中给视图添加注释怎么添加_默认不支持_可以这样取巧---MySql工作笔记002
查看>>
Mysql中获取所有表名以及表名带时间字符串使用BetweenAnd筛选区间范围
查看>>