假设此元素为 #item,先说几个关键的属性:

$('#item').offset().top
#item 的绝对偏移量,指#item的实际尺寸(即不包括外边框margin)的上边界到页面顶端的距离.这个值不随窗口滚动而改变

$('#item').outerHeight()
#item 的实际尺寸,即 height+padding+border

$('#item').outerHeight(true)
#item的实际尺寸及外边距,即 height+padding+border+margin

$(window).scrollTop()
窗口滚动的顶部偏移量,即此时页面的上边界到可视区域的上边界的偏移量,简单的可以理解成整个页面滚动了多少距离

$(window).height()
浏览器窗口可视区域的高度
用脚后跟想想就能想到,在窗口上下滚动的情况下,一个页面元素的状态有3种,1.向上滚动超出可视区域,2.向下滚动超出可视区域,3.在可视区域内.很明显,我们需要的就是1和2两种情况. 情况1: 由于元素随页面向上滚动,所以自然能想到,在页面顶部偏移量不断增加的过程中,边界是从上至下经过一段距离,而这个距离的区域恰好就是元素本身的偏移量加上元素本身的高度,所以当

$(window).scrollTop()>($('#item').offset().top+$('#item').outerHeight())
这个表达式结果为true时,表示元素已经向上滚动,并超出了可视区域.
情况2: 与情况1相反,向下滚动的过程,页面顶部的偏移量是在不断减少中,所以当它小于元素偏移量与可视区域高度的差值的时候,元素则向下并超出了可视区域,即

$(window).scrollTop()<($('#item').offset().top-$(window).height())

那么结论就是将这两种情况作或运算即可达到目的.以下表达式结果如果为true,则 #item 不在可视区域内.反之则在可视区域内.

($(window).scrollTop()>($('#item').offset().top+$('#item').outerHeight()))||(($(window).scrollTop()+$(window).height())<$('#item').offset().top)

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

  1. jquery判断元素是否出现在可视区

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

  2. JQuery判断元素是否存在

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

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

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

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

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

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

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

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

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

  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. android之DOM生成与解析

    DOM解析不适合于进行大数据文件的操作,DOM解析适合于对文件进行修改和随机存取的操作. DOM生成 //判断一下是否存在sdcard if(!Environment.getExternalStora ...

  2. RPI学习--webcam_用fswebcam抓取图片

    若 ls /dev 下没有video0,可以参考http://www.cnblogs.com/skynext/p/3644873.html,更新firmware 1,安装fswebcam: sudo ...

  3. 这个setDefaultCloseOperation写不写的区别是什么?

      2009-03-23 13:40提问者采纳   设置用户在此窗体上发起 "close" 时默认执行的操作.必须指定以下选项之一: DO_NOTHING_ON_CLOSE(在 W ...

  4. SharePoint 2013 Nintex Workflow 工作流帮助(一)

    博客地址 http://blog.csdn.net/foxdave 接下来一段时间的内容中,我们基于SharePoint 2013来了解一下Nintex Workflow的具体内容. 之前的几篇由于之 ...

  5. (五)CoreData 使用 (转)

    第一次真正的使用CoreData,因此也会写下体会和心得...等有时间 Core Data数据持久化是对SQLite的一个升级,它是ios集成的,在说Core Data之前,我们先说说在CoreDat ...

  6. webview调用外部浏览器而不是在控件中显示

    view.loadUrl(url); // 如果页面中链接,如果希望点击链接继续在当前browser中响应,                     // 而不是新开Android的系统browser ...

  7. C#特性

    一.概念:C#的特性也是一个类,继承自System.Attribute,用于描述类.方法.字段等 二.类型:   2.1  .net中特性用来处理多种问题,比如序列化.程序的安全特性.防止即时编译器对 ...

  8. iOS对象序列化

    系统对象的归档我就不介绍了,这个不复杂,自己看一下就会了. 我在这里主要介绍自定义对象的归档. Sample.h文件 // //  Sample.h //  Serialization // //   ...

  9. AutoCAD ObjectARX(VC)开发基础与实例教程2014版光盘镜像

    AutoCAD ObjectARX(VC)开发基础与实例教程2014,最新版,光盘镜像 作者:张帆 朱文俊 编著 出版社:中国电力出版社 出版时间:2014年6月 点击一下

  10. spark与Hadoop区别

    2分钟读懂Hadoop和Spark的异同 2016.01.25 11:15:59 来源:51cto作者:51cto ( 0 条评论 )   谈到大数据,相信大家对Hadoop和Apache Spark ...