使用jQuery判断元素是否在可视区域
$("#app").offset().top;
offset().top表示 绝对偏移值,比如说有一个很长的页面,#app这个元素 在最底下, $("#app").offset().top就表示 #app这个元素距离页面顶端的距离,它一般是固定的,不随窗口滚动而改变。
$(window).scrollTop();
窗口滚动的顶部偏移量,即此时页面的上边界到可视区域的上边界的偏移量,简单的可以理解成整个页面滚动了多少距离
$(window).height():
浏览器可视窗口的高度
完整js代码如下:
<script type="text/javascript">
$(document).ready(function () {
$(window).scroll(function () {
var a = $("#app").offset().top;
if (a >= $(window).scrollTop() && a < ($(window).scrollTop() + $(window).height())) {
alert("div在可视范围");
}
});
});
</script>
使用jQuery判断元素是否在可视区域的更多相关文章
- 如何判断元素是否在可视区域ViewPort
个性签名: 生如夏花,逝如冬雪:人生如此,何悔何怨. 前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth,clientWidth,scrollWidth,scrollTop这几个 ...
- 如何判断元素是否在可视区域内--getBoundingClientRect
介绍 Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置. 根据MDN文档 getBoundingClientRect 方法返回的是一个DOMRect ...
- jq、js判断元素是否在可视区域内
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> ...
- Vue-懒加载(判断元素是否在可视区域内)
上公式: 元素距离顶部高度(elOffsetTop) >= dom滚动高度(docScrollTop) 并且元素距离顶部高度(elOffsetTop) < (dom滚动高度 + 视窗高度) ...
- JQuery判断元素是否存在
JQuery判断元素是否存在的原理与javascript略有不同,因为$选择器选择的元素无论是否存在都不会返回null或undefined,要使用JQuery判断元素是否存在,只能使用length属性 ...
- jQuery判断元素是否存在方法
1.使用javascript判断元素是否存在 if(document.getElementById('div')) { } else { } 2.使用jquery判断元素是否存在 if ($(&quo ...
- jQuery判断元素是否在可视区
假设此元素为 #item,先说几个关键的属性: $('#item').offset().top#item 的绝对偏移量,指#item的实际尺寸(即不包括外边框margin)的上边界到页面顶端的距离.这 ...
- jquery判断元素是否隐藏的多种方法
第一种:使用CSS属性 复制代码 代码如下: var display =$('#id').css('display'); if(display == 'none'){ alert("被 ...
- js jquery 判断元素是否在数组内
js jquery 判断元素是否在数组内 一,js方法 var arr = ["a", "b", "c"]; // js arr.index ...
随机推荐
- 蓝色巨人IBM
1911年IBM的前身CRT建立,在中华民国时期就与中国有很多商业合作,中国中央银行,中国银行,黄埔造船厂,建国后直到中美建交,IBM与中国的关系越来越紧密,今晚看了一遍关于蓝色巨人的视频,收益匪浅. ...
- idea导出war包
使用idea一个月了还没有用到导出war,今天突然需要我来部署测试war包,想使用myeclipse的,转念一想太掉价了 废话少说,直接上菜 如果你没有第一步操作我建议你配置一下你的idea 当然还有 ...
- Bootstrap框架的了解和使用之栅格系统
前 言 Bootstrap Bootstrap 包含了一个响应式的.移动设备优先的.不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12 列.它包含了用于简单的布局选项的预定 ...
- 树状数组初步_ZERO
原博客:树状数组 1 一维树状数组 1 什么是树状数组 树状数组是一个查询和修改复杂度都为log(n)的数据结构,假设数组A[1..n],那么查询A[1]+-+A[n]的时,间是log级 ...
- html表格宽度设置失效
问题描述: 我在写一个网页table时,table宽度超过了我预想的宽度,我想把它设置小一点,但总是没效果.改到怀疑人生!代码如下: 经过多次调试后发现一个问题,table可以改变大小,但是会有一个最 ...
- [转载]Reids配置文件详解
# redis 配置文件示例 # 当你需要为某个配置项指定内存大小的时候,必须要带上单位, # 通常的格式就是 1k 5gb 4m 等酱紫: # # 1k => 1000 bytes # 1kb ...
- bootstrap 的可编辑下拉框 jquery.editable-select
搜了半天发现在某处下载jquery.editable-select需要积分,于是整理出来方便 其他人. 先上下载链接:http://pan.baidu.com/s/1kUXvwlL pass ...
- KMP算法的细节问题
preface: 想必,很多人都知道D.E.Knuth与V.R.Pratt和J.H.Morris同时提出所谓的狂拽酷炫屌炸天的KMP算法,在对字符串的匹配(或是字符串的查找)方面表现出比较好的效率,该 ...
- Socket简单实现数据交互及上传
声明:本文为原创,如需转载请说明出处:http://www.cnblogs.com/gudu1/p/7669175.html 首先为什么要写这个呢?因为在几个月之前我还使用Socket做一个小项目,而 ...
- RN 常见问题
React/RCTBridgeModule.h not found #import <React/RCTBridgeModule.h> 全部替换为 #import "RCTBri ...