使用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 ...
随机推荐
- JavaSE(九)之反射
开始接触的时候可能大家都会很模糊到底什么是反射,大家都以为这个东西不重要,其实很重要的,几乎所有的框架都要用到反射,增加灵活度.到了后面几乎动不动就要用到反射. 首先我们先来认识一下对象 学生---- ...
- JVM菜鸟进阶高手之路十一(eden survivor分配问题)
转载请注明原创出处,谢谢! 问题 这个Xmn设置为1G,,我用jmap -heap 看,这个Eden From To怎么不是一个整8:1:1的关系呢? 我看内存分配还是没变,我Xmn1g,感觉From ...
- Failed to start component [StandardEngine[Catalina].StandardHost[localhost].StandardContext[/SpringStruts]]
今天启动Tomcat时候遇到了这个问题 Failed to start component [StandardEngine[Catalina].StandardHost[localhost].Stan ...
- 工欲善其事,必先利其器之open live writer写作
在博客园学习有一段时间,想想是不是自己也应该开始写点东西,做点总结,更加快速的提升自己. 查看小组/博客园使用帮助 得知目前windows live writer 已经停止更新并推荐安装 open l ...
- MySQL+Keepalived配置高可用
服务器环境: 主mysql:192.168.1.163 从mysql:192.168.1.126 VIP:192.168.1.50 一.mysql配置主从同步 1.配置主mysql服务器 vim /e ...
- MMORPG战斗系统随笔(三)、AI系统简介
在设计一款游戏的时候,如果我们是玩家,是希望自己能够操作角色畅玩游戏的.在一款MMORPG游戏中,大部分的实际游戏角色,是需要玩家来操作的,通过在游戏大世界相互完成游戏中的任务等等来体验游戏.在大世界 ...
- 配置zabbix agent向多个server发送数据
1.背景: agent 端:dba-test-hzj02 172.16.59.197 server端:172.16.59.197 ,172.16.59.98 2.方式: 配置多个server,se ...
- 解决Android5.0以下Dialog引起的内存泄漏
最近项目开发中,开发人员和测试人员均反应在android5.0以下手机上LeakCanary频繁监控到内存泄漏,如下图所示,但凡用到Dialog或DialogFragment地方均出现了内存泄漏. 如 ...
- 编写 WPF DataGrid 列模板,实现更好的用户体验
Julie Lerman 下载代码示例 最近我在为一个客户做一些 Windows Presentation Foundation (WPF) 方面的工作. 虽然我提倡使用第三方工具,但有时也会避免使用 ...
- KMP算法实践与简单分析
一.理解next数组 1.约定next[0]=-1,同时可以假想在sub串的最前面有一个通配符"*",能够任意匹配.对应实际的代码t<0时的处理情况. 2.next[j]可以 ...