在我们的日常开发中，经常会遇到当元素出现在可视区的时候需要去出发某一事件的情况。
我最近在优化环球网首页的时候，将非可视区的代码全部放入到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. neo4j算法（1）-介绍

    neo4j为图数据库,其中涉及的也就为图算法,图算法被用来度量图形,节点及关系. 在neo4j中,通过call algo.list() 可查看neo4j中的算法列表. 在neo4j官方文档中,主要记录 ...

  2. 使用CEfSharp之旅（5）CEFSharp 隔离Cookie

    原文:使用CEfSharp之旅(5)CEFSharp 隔离Cookie 版权声明:本文为博主原创文章,未经博主允许不得转载.可点击关注博主 ,不明白的进群191065815 我的群里问 https:/ ...

  3. 在使用python语言的open函数时，提示错误OSError: [Errno 22] Invalid argument: ‘文件路径’

    如题,在使用python语言的open函数时,提示错误OSError: [Errno 22] Invalid argument: '文件路径',在查阅了大量资料后也得到了一些解决方案,但是这些解决方案 ...

  4. RunLoop运行循环机制

    http://www.jianshu.com/p/0be6be50e461 基本概念 进程 进程是指在系统中正在运行的一个应用程序,而且每个进程之间是独立的,它们都运行在其专用且受保护的内存空间内,比 ...

  5. jQuery插件编写，

    jQuery插件编写 jQuery插件 最近搞jquery插件的编写这里做下笔记 给jquery扩展的方式很多,看的我眼花缭乱 方式1 $.fun=function(){} 方式2 $.fn.fun= ...

  6. layui实现批量导入excal表

    layui实现多文件上传,并直接选中需要上传文件的类型 //拖拽上传 upload.render({ elem : '#import', size: , //限制文件大小,单位 KB accept: ...

  7. mysql之备份表和备份数据库

    备份表 1.首先创建一个与原来一样的表 create table score2 like score; ###like就是将score表的结构拷贝过来,但是它并不执行数据:也就是说执行完上面的语句之后 ...

  8. 【转】IOS获取屏窗高度踩坑之window.outerHeight

    近日本人在直接使用window.outerHeight获取屏窗高度时 在iphone 6中出现等于0的情况,从而导致页面发生错误 后找遍代码,测试无数,终于让我逮住了这个该死兼容 window.out ...

  9. CF148D Bag of mice (期望dp)

    传送门 # 解题思路 ​    ~~这怕是本蒟蒻第一个独立做出来的期望$dp$的题,发篇题解庆祝一下~~.首先,应该是能比较自然的想出状态设计$f[i][j][0/1]$ 表示当前还剩 $i$个白老鼠 ...

  10. 《DSP using MATLAB》Problem 8.7

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...