在我们的日常开发中，经常会遇到当元素出现在可视区的时候需要去出发某一事件的情况。
我最近在优化环球网首页的时候，将非可视区的代码全部放入到webComponent中。打算当这个元素出现在可视区的时候去加载对应的shadowRoot。

那么，言归正传，对于我这个前端小白，还是好先搞定如何判断元素出现在可视区啊！

jquery实现起来比较简单，先解释下几个东东

offset().top和offsetTop；
offsetTop:元素border外侧到offsetParent()的偏移量。（offsetParent():是元素的第一级拥有定位属性(absolute/relative/fixed)的父元素）.
offset().top:到document的绝对偏移量，这个当然就是我们需要的。offset().top当浏览器出现滚动条的时候，offset().top是不会变化的，当没有滚动条的时候，这个值是会变化的（可以理解的哈）。
outHeight(): 元素的height＋padding＋border
outHeight(true):元素的height＋padding＋border＋margin
$(window).height():浏览器可视窗口的高度
$(window).scrollTop():document的顶部和浏览器顶部的距离

所以我们就可以很简单的判断元素是不是出现在浏览器可视区了：
代码如下（这里我故意加了个div，position为relative）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

    <meta charset="utf-8">

    <title>js</title>

    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $(window).scroll(function () {

                var a = $("#eq").offset().top;

                console.log(a);

                console.log($(window).scrollTop());

                console.log($(window).height());

                if (a >= $(window).scrollTop() && a < ($(window).scrollTop() + $(window).height())) {

                    console.log("div在可视范围");

                }

            });

        });

    </script>

</head>

<body>

<div style="width:1px;height:2000px; -webkit-tap-highlight-color: transparent;">></div>

<div style="position:relative">

    <div id="eq" style=" width:100px; height:100px; ">1</div>

</div>

<div style="width:1px;height:2000px; -webkit-tap-highlight-color: transparent;">></div>

</body>

</html>

jquery判断元素是否出现在可视区的更多相关文章

  1. JQuery判断元素是否存在

    JQuery判断元素是否存在的原理与javascript略有不同,因为$选择器选择的元素无论是否存在都不会返回null或undefined,要使用JQuery判断元素是否存在,只能使用length属性 ...

  2. jQuery判断元素是否存在方法

    1.使用javascript判断元素是否存在 if(document.getElementById('div')) { } else { } 2.使用jquery判断元素是否存在 if ($(&quo ...

  3. jquery判断元素是否隐藏的多种方法

    第一种:使用CSS属性 复制代码 代码如下: var display =$('#id').css('display'); if(display == 'none'){    alert("被 ...

  4. js jquery 判断元素是否在数组内

    js jquery 判断元素是否在数组内 一,js方法 var arr = ["a", "b", "c"]; // js arr.index ...

  5. jquery判断元素的子元素是否存在

    jquery判断元素的子元素是否存在的示例代码. jquery判断子元素是否存在 一.判断子元素是否存在 //一级子元素 if($("#specialId>img").len ...

  6. jquery判断元素是否存在在数组中

    var myArray = new Array(); function checkRepeat(sel) { console.log("索引是:" + $.inArray(sel, ...

  7. jQuery判断元素是否存在方法总结

    在jquery中判断元素是否存在我们可使用$("#div").length > 0)来判断了,意思就是判断元素长度了,如果没有肯定是不存在的哦,下面我来介绍介绍. 使用传统j ...

  8. jQuery判断元素是否是隐藏的代码

    if($("#elem_id").is(":hidden")) { } 实例代码1: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC & ...

  9. jQuery判断元素是否显示与隐藏

    jQuery判断一个元素是显示还是隐藏,jQuery使用is()方法来判断一个元素是否显示,反之则为隐藏 核心代码 if($("#username").is(":hidd ...

随机推荐

  1. Team Train Recorder 2.0

    Bubble Cup 12 - Finals Online Mirror, unrated, Div. 1 2019/10/4, solved 4/9, upsolved

  2. 一个上午，勉强记住了几种不同语言编译PE的启动函数

    VC:启动函数最乱,三大函数都在后面.前面8个PUSH DELPHI7:启动函数最整洁,2.3.4.2,形式排队 VB:启动函数最好记,12个0.... 汇编:三大函数距离最紧凑,除VB外,启动函数最 ...

  3. CSDN的验证码，为什么要这样呢

    总是有连着的部分

  4. java_递归

    递归:方法在有结束条件的情况下调用自己本身 public static void main(String[] args) { int i = shu01(5); System.out.println( ...

  5. 设置Hadoop+Hbase集群pid文件存储位置

    有时候,我们对运行几天或者几个月的hadoop或者hbase集群做停止操作,会发现,停止命令不管用了,为什么呢? 因为基于java开发的程序,想要停止程序,必须通过进程pid来确定,而hadoop和h ...

  6. iOS开发系列-GCD

    概述 GCD是苹果公司为多核的并行运算提出的解决方案.全称是Grand Central Dospatch.纯C语言,提供了非常多强大的函数. GCD自动管理线程的声明周期(创建线程.调度任务.销毁线程 ...

  7. UBOOT把文件写入 NandFlash

    如果把一个传到内存中的文件写入到 Nand Flash 中, 如:新的 uboot.bin, zImage(内核), rootfs 等, 如果做呢?我们可以用 Nand Flash 命令来完成. 但是 ...

  8. 【学术篇】状态压缩动态规划——POJ3254/洛谷1879 玉米田Corn Field

    我要开状压dp的坑了..直播从入门到放弃系列.. 那就先拿一道状压dp的水题练练手吧.. 然后就找到了这一道..这道题使我清醒地认识到阻碍我的不是算法,而是视力= = 传送门: poj:http:// ...

  9. uoj37 主旋律

    题意:一个班级n个人,如果a爱b,那么a->b一条有向边.问有多少种删边集合使得图仍然强联通? n<=15.   标程: #include<cstdio> #include&l ...

  10. 六. Default arguments 参数默认值

    示例: 注意点:函数是会默认声明参数变量的,所以不需要再重新声明一次,否则会报错 错误示例如下: 函数参数的传值方法: 需要注意的是:如果要给第二个参数传值,那第一个参数要传undefined,而不能 ...