最近闲来无事，多封装些功能性组件。后期会有更多放出来，大家可以多关注一下。

先上参数：

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的垂直滚动触发器，多参数可设置。的更多相关文章

  1. 基于 jQuery 实现垂直滑动的手风琴效果

    今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...

  2. 基于jQuery左侧小图滚动右侧大图显示代码

    今天给大家分享一款 jQuery左侧小图滚动右侧大图显示代码是一款基于jQuery实现的左侧滚动图片点击大图查看效果代码.该实例适用浏览器:IE8.360.FireFox.Chrome.Safari. ...

  3. 基于jQuery实现页面滚动时顶部导航显示隐藏效果

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  4. 基于jQuery封装的分页组件（可自定义设置）

    jQuery封装的分页组件 前几天做了一个vue的组件分页,而现在需求是jquery的分页,我就根据我自己的需求写了一个.在网上找了很久的基于jquery的分页封装,可是都不是我想要的结果,那么今天我 ...

  5. jquery垂直滚动插件一个参数用于设置速度,兼容ie6

    利用外层的块级元素负外边距来滚动 1.使用 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://ww ...

  6. 使用 jQuery.Pin 垂直滚动时固定导航

    ZKEACMS的导航默认是不能固定的,随着页面的滚动而滚动,为了有更好的用户体验,当页面往下滚动时,可以将导航固定在顶端,这样方便用户点击. jQuery Pin 借助jQuery的一个插件 jQue ...

  7. 基于JQuery打造无缝滚动新闻

    JQuery实现 新闻无缝滚动 一.使用"首尾追加"实现无缝滚动 <head lang="en"> <meta charset="U ...

  8. jQuery图片垂直滚动焦点图

    在线演示 本地下载

  9. jQuery BreakingNews 间歇滚动

    BreakingNews 是一款基于jQuery的间歇滚动插件.它可以设置标题.标题颜色.标题背景颜色.链接颜色.字体大小.边框.宽度.自动滚动.间歇时间等等,同时它还好提供两种过度方式--淡入淡出( ...

随机推荐

  1. bzoj3114 LCM Pair Sum

    题意:以质因数分解的方式给定n,求所有满足:lcm(a, b) = n的无序数对的价值和.其中(a, b)的价值为a + b 解: 定义首项为a,公比为q,项数为n的等比数列的和为getQ(a, q, ...

  2. bug4 导入新工程时报 Target runtime com.genuitec.runtime.generic.jee60 is not defined

    系统加载工程后,报错Target runtime com.genuitec.runtime.generic.jee60 is not defined,在发布工程的同事电脑上正常.新导入的工程,出问题很 ...

  3. dedecms添加文章时提示标题为空，编辑文章时编辑器空白的解决办法

    dedecms添加文章时提示标题为空,编辑文章时编辑器空白的解决办法 dedecms出现这个问题与代码无关,主要是和PHP的版本有关,用的PHP5.4,更换成PHP5.2之后就不会有这个问题了. 问题 ...

  4. RabbitMQ之集群搭建

    1.RabbitMQ集群模式RabbitMQ集群中节点包括内存节点(RAM).磁盘节点(Disk,消息持久化),集群中至少有一个Disk节点. 2.普通模式(默认)        对于普通模式,集群中 ...

  5. 常用日期计算SQL语句

    -- 本月的第一天 SELECT DATEADD(mm, DATEDIFF(mm,0,getdate()), 0) -- 本月的最后一天 SELECT DATEADD(ms,-3,DATEADD(mm ...

  6. Python基础【day01】：PyChram使用技巧总结（六）

    本节内容 1.添加或者修改文件模板 2. python版本管理切换 3.已有文件重命名4.Python模块安装5.在PyChram中直接浏览文件目录6. 断点调试7.常用快捷键8.PyChram设置字 ...

  7. 鸟哥的Linux私房菜——第十一章

    视频链接: 土豆:http://www.tudou.com/programs/view/yT0PfIWU720 B站(推荐): http://www.bilibili.com/video/av9877 ...

  8. CSS规范 - 分类方法--（来自网易）

    CSS文件的分类和引用顺序 通常,一个项目我们只引用一个CSS,但是对于较大的项目,我们需要把CSS文件进行分类. 我们按照CSS的性质和用途,将CSS文件分成“公共型样式”.“特殊型样式”.“皮肤型 ...

  9. HDU 4712 Hamming Distance(随机算法）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4712 解题报告:输入n个数,用十六进制的方式输入的,任意选择其中的两个数进行异或,求异或后的数用二进制 ...

  10. 第9月第9天 CTFramesetterCreateWithAttributedString

    1. NSString *text = @"This\nis\nsome\nmulti-line\nsample\ntext."; UIFont *uiFont = [UIFont ...