jQuery判断元素是否在可视区
假设此元素为 #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判断元素是否在可视区的更多相关文章
- jquery判断元素是否出现在可视区
在我们的日常开发中,经常会遇到当元素出现在可视区的时候需要去出发某一事件的情况.我最近在优化环球网首页的时候,将非可视区的代码全部放入到webComponent中.打算当这个元素出现在可视区的时候 ...
- JQuery判断元素是否存在
JQuery判断元素是否存在的原理与javascript略有不同,因为$选择器选择的元素无论是否存在都不会返回null或undefined,要使用JQuery判断元素是否存在,只能使用length属性 ...
- jQuery判断元素是否存在方法
1.使用javascript判断元素是否存在 if(document.getElementById('div')) { } else { } 2.使用jquery判断元素是否存在 if ($(&quo ...
- jquery判断元素是否隐藏的多种方法
第一种:使用CSS属性 复制代码 代码如下: var display =$('#id').css('display'); if(display == 'none'){ alert("被 ...
- js jquery 判断元素是否在数组内
js jquery 判断元素是否在数组内 一,js方法 var arr = ["a", "b", "c"]; // js arr.index ...
- jquery判断元素的子元素是否存在
jquery判断元素的子元素是否存在的示例代码. jquery判断子元素是否存在 一.判断子元素是否存在 //一级子元素 if($("#specialId>img").len ...
- jQuery判断元素是否存在方法总结
在jquery中判断元素是否存在我们可使用$("#div").length > 0)来判断了,意思就是判断元素长度了,如果没有肯定是不存在的哦,下面我来介绍介绍. 使用传统j ...
- jQuery判断元素是否是隐藏的代码
if($("#elem_id").is(":hidden")) { } 实例代码1: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC & ...
- jQuery判断元素是否显示与隐藏
jQuery判断一个元素是显示还是隐藏,jQuery使用is()方法来判断一个元素是否显示,反之则为隐藏 核心代码 if($("#username").is(":hidd ...
随机推荐
- android之DOM生成与解析
DOM解析不适合于进行大数据文件的操作,DOM解析适合于对文件进行修改和随机存取的操作. DOM生成 //判断一下是否存在sdcard if(!Environment.getExternalStora ...
- RPI学习--webcam_用fswebcam抓取图片
若 ls /dev 下没有video0,可以参考http://www.cnblogs.com/skynext/p/3644873.html,更新firmware 1,安装fswebcam: sudo ...
- 这个setDefaultCloseOperation写不写的区别是什么?
2009-03-23 13:40提问者采纳 设置用户在此窗体上发起 "close" 时默认执行的操作.必须指定以下选项之一: DO_NOTHING_ON_CLOSE(在 W ...
- SharePoint 2013 Nintex Workflow 工作流帮助(一)
博客地址 http://blog.csdn.net/foxdave 接下来一段时间的内容中,我们基于SharePoint 2013来了解一下Nintex Workflow的具体内容. 之前的几篇由于之 ...
- (五)CoreData 使用 (转)
第一次真正的使用CoreData,因此也会写下体会和心得...等有时间 Core Data数据持久化是对SQLite的一个升级,它是ios集成的,在说Core Data之前,我们先说说在CoreDat ...
- webview调用外部浏览器而不是在控件中显示
view.loadUrl(url); // 如果页面中链接,如果希望点击链接继续在当前browser中响应, // 而不是新开Android的系统browser ...
- C#特性
一.概念:C#的特性也是一个类,继承自System.Attribute,用于描述类.方法.字段等 二.类型: 2.1 .net中特性用来处理多种问题,比如序列化.程序的安全特性.防止即时编译器对 ...
- iOS对象序列化
系统对象的归档我就不介绍了,这个不复杂,自己看一下就会了. 我在这里主要介绍自定义对象的归档. Sample.h文件 // // Sample.h // Serialization // // ...
- AutoCAD ObjectARX(VC)开发基础与实例教程2014版光盘镜像
AutoCAD ObjectARX(VC)开发基础与实例教程2014,最新版,光盘镜像 作者:张帆 朱文俊 编著 出版社:中国电力出版社 出版时间:2014年6月 点击一下
- spark与Hadoop区别
2分钟读懂Hadoop和Spark的异同 2016.01.25 11:15:59 来源:51cto作者:51cto ( 0 条评论 ) 谈到大数据,相信大家对Hadoop和Apache Spark ...