通过Jquery判断页面元素是否在浏览器的可视区域内
来源:互联网 发布:淘宝上女包好卖吗 编辑:程序博客网 时间:2024/05/17 18:26
通过Jquery判断页面元素是否在浏览器的可视区域内
前端开发中,有时需要判断某个元素是否在浏览器的可视区域内,或者是否已经滚动出了可视区域.首先想到的便是javascript操作,原生方法自然可以,不过Jquery已经封装了一些属性,使用起来更方便些,我们这里就讨论这种Jquery的方式.(伸手党可直接看文章屁股 :cool:) 假设此元素为 #item,先说几个关键的属性:JavaScript
1
jQuery('#item').offset().top
JavaScript
1
jQuery('#item').outerHeight()
JavaScript
1
jQuery('#item').outerHeight(true)
JavaScript
1
jQuery(window).scrollTop()
JavaScript
1
jQuery(window).height()
用脚后跟想想就能想到,在窗口上下滚动的情况下,一个页面元素的状态有3种,1.向上滚动超出可视区域,2.向下滚动超出可视区域,3.在可视区域内.很明显,我们需要的就是1和2两种情况. 情况1: 由于元素随页面向上滚动,所以自然能想到,在页面顶部偏移量不断增加的过程中,边界是从上至下经过一段距离,而这个距离的区域恰好就是元素本身的偏移量加上元素本身的高度,所以当
JavaScript
1
jQuery(window).scrollTop()>(jQuery('#item').offset().top+jQuery('#item').outerHeight())
情况2: 与情况1相反,向下滚动的过程,页面顶部的偏移量是在不断减少中,所以当它小于元素偏移量与可视区域高度的差值的时候,元素则向下并超出了可视区域,即
JavaScript
1
jQuery(window).scrollTop()<</span>(jQuery('#item').offset().top-jQuery(window).height())
那么结论就是将这两种情况作或运算即可达到目的.以下表达式结果如果为true,则 #item 不在可视区域内.反之则在可视区域内.
JavaScript
1
(jQuery(window).scrollTop()>(jQuery('#item').offset().top+jQuery('#item').outerHeight()))||((jQuery(window).scr
0 0
- Jquery判断页面元素是否在浏览器的可视区域内
- 通过Jquery判断页面元素是否在浏览器的可视区域内
- 通过Jquery判断页面元素是否在浏览器的可视区域内
- 通过Jquery判断页面元素是否在浏览器的可视区域内
- 通过Jquery判断页面元素是否在浏览器的可视区域内
- js判断元素是否在可视区域内
- 判断元素是否在可视区域内
- 如何判断一个div是否在页面可视区域内
- jQuery poshytip实现页面不可视区域内的字段信息通过提示框展示
- 元素在浏览器可视区域判断
- jq判断一个元素是否在可视范围内
- 在jQuery,如何判断页面元素是否存在?
- jQuery判断元素在页面内是否可见
- 判断用户是否在看当前网页以及判断某个元素是否在网页可视区域
- jQuery 判断页面元素是否存在的代码
- jQuery 判断页面元素是否存在的代码
- 用jQuery判断页面元素是否存在的方法
- jQuery 判断页面元素是否存在的代码
- git内容整理--版本控制工具的高级用法
- Mysql实现实时备份
- 部署eclipse+junit+selenium未添加selenium-server-standalone-2.46.0.jar抛异常
- 如何让json_encode不转义斜杠
- linux下i2c驱动笔记
- 通过Jquery判断页面元素是否在浏览器的可视区域内
- DOS命令查看硬盘序列号
- 使用Qt开发中国象棋(六):将军和死棋检测
- ubuntu14.04下weka的安装与配置——数据分析环境搭建1
- Netty in action study
- 【struts2】五大核心jar包 和 作用
- ajax相同url执行多次
- 第三方
- RAC 的一些概念性和原理性的知识