使用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 ...
随机推荐
- springmvc02
1,创建实体类对象User 注意要导入 bean-validator.jar 包 package com.yangw.springmvc.entity; import org.hibernate.va ...
- WebSocket部署服务器外网无法连接解决方案
首先要说的是我遇见的问题: WebSocket connection to 'ws://www.xxxx.com/xxx/xx' failed: Error during WebSocket hand ...
- oracle 数据库(表)的逻辑备份与恢复
一.介绍逻辑备份是指使用工具export将数据对象的结构和数据导出到文件的过程.逻辑恢复是指当数据库对象被误操作而损坏后使用工具import利用备份的文件把数据对象导入到数据库的过程.物理备份即可在数 ...
- SpringMVC——使用RequestDispatcher.include()和HttpServletResponseWrapper动态获取jsp输出内容
介绍本篇内容前,先抛出我遇到的问题或者说是需求!(精读阅读本篇可能花费您15分钟,略读需5分钟左右) 一:需求说明 有一个Controller有两个方法 第一个方法通过指定的路径和参数去渲染jsp内容 ...
- ElasticSearch 插件jdbc import(1)-----定时执行
定时执行 参数schedule用来配置cron定时表达式 同时支持JSON数组的方式定义多个定时表达式: 例子如下: "schedule" : "0 0-59 0 ...
- hdu3507 Print Article(斜率DP优化)
Zero has an old printer that doesn't work well sometimes. As it is antique, he still like to use it ...
- VisualStudio快捷键大全
Ctrl+m+Crtr+o折叠所有大纲Ctrl+M+Crtr+P: 停止大纲显示Ctrl+K+Crtr+C: 注释选定内容Ctrl+K+Crtr+U: 取消选定注释内容Ctrl+J : 列出成员 智能 ...
- Java面向对象(封装性概论)
Java面向对象(封装性概论) 知识概要: (1)面向对象概念 (2)类与对象的关系 (3)封装 (4)构造函数 (5)this关键字 (6)static关键 ...
- asp.net中利用Jquery+Ajax+Json实现无刷新分页(二)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PageTest.aspx.cs ...
- 在C#中实现串口通信的方法
通常,在C#中实现串口通信,我们有四种方法: 第一:通过MSCOMM控件这是最简单的,最方便的方法.可功能上很难做到控制自如,同时这个控件并不是系统本身所带,所以还得注册,不在本文讨论范围.可以访问h ...