jquery判断元素是否出现在可视区
在我们的日常开发中,经常会遇到当元素出现在可视区的时候需要去出发某一事件的情况。
我最近在优化环球网首页的时候,将非可视区的代码全部放入到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判断元素是否出现在可视区的更多相关文章
- 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判断元素是否存在在数组中
var myArray = new Array(); function checkRepeat(sel) { console.log("索引是:" + $.inArray(sel, ...
- jQuery判断元素是否存在方法总结
在jquery中判断元素是否存在我们可使用$("#div").length > 0)来判断了,意思就是判断元素长度了,如果没有肯定是不存在的哦,下面我来介绍介绍. 使用传统j ...
- jQuery判断元素是否是隐藏的代码
if($("#elem_id").is(":hidden")) { } 实例代码1: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC & ...
- jQuery判断元素是否显示与隐藏
jQuery判断一个元素是显示还是隐藏,jQuery使用is()方法来判断一个元素是否显示,反之则为隐藏 核心代码 if($("#username").is(":hidd ...
随机推荐
- 2019-11-9-win10-支持默认把触摸提升-Pointer-消息
title author date CreateTime categories win10 支持默认把触摸提升 Pointer 消息 lindexi 2019-11-09 15:32:31 +0800 ...
- RuntimeError: Python is not installed as a framework. The Mac OS X backend will not be able to function correctly if Python is not installed as a framework. See the Python documentation for more infor
在virtualenv环境下使用matplotlib绘图时遇到了这样的问题: >>> import matplotlib.pyplot as pltTraceback (most r ...
- webpack打包出错分析
Module not found: Error: Can't resolve 'bundle.js' in 更改打包命令 webpack run1.js -o bundle.js
- Algo: Dynamic programming
Copyright © 1900-2016, NORYES, All Rights Reserved. http://www.cnblogs.com/noryes/ 欢迎转载,请保留此版权声明. -- ...
- Vagrant box ubuntu/xenial64 添加vagrant用户解决没有登录密码的问题
参考了Vagrant box ubuntu/xenial64 の ubuntuユーザ の passwordについて 1. 可以通过 Git Bash 使用 vagrant ssh 登录到Ubuntu ...
- idea-----Intellij IDEA配置tomcat(非maven项目)
Intellij IDEA配置tomcat(非maven项目) 引用: https://blog.csdn.net/springlovejava/article/details/78570241 ID ...
- Java虚拟机性能管理神器 - VisualVM(9) 排查JAVA应用程序线程死锁【转】
Java虚拟机性能管理神器 - VisualVM(9) 排查JAVA应用程序线程死锁[转] 标签: javajvm监控工具性能优化 2015-03-11 19:59 1948人阅读 评论(0) 收藏 ...
- 关于str的打印格式
实际上一般的打印格式应该是这样的: %[(keyname)][flags][width][.precision]typecode (1) keyname: 用于打印Dict类型时做索引; (2) fl ...
- 2、java变量+零碎知识点
1>展示console:window--show view--console2>创建工程 右键--new---java project 文件夹 jre src 所有的java类都在src中 ...
- make: 警告:检测到时钟错误。您的创建可能是不完整的。
我在make的时候也出现了同样的问题,不过不是什么大问题,这个不影响编译结果,但是强迫症还是希望能解决掉 分析原因可能是:服务器上的文件最后修改时间比当前时钟要晚 解决办法:用touch 命令把源程序 ...