如何判断一个Div是否可视区域,判断div是否可见
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<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 = document.getElementById("eq").offsetTop;
if (a >= $(window).scrollTop() && a < ($(window).scrollTop()+$(window).height())) {
alert("div在可视范围");
}
});
});
</script>
</head>
<body>
<div style="width:1px;height:2000px;"></div>
<div id="eq" style=" width:100px; height:100px; background-color:Red;">1</div>
<div style="width:1px;height:2000px;"></div>
</body>
</html>
如何判断一个Div是否可视区域,判断div是否可见的更多相关文章
- 如何判断元素是否在可视区域ViewPort
个性签名: 生如夏花,逝如冬雪:人生如此,何悔何怨. 前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth,clientWidth,scrollWidth,scrollTop这几个 ...
- 使用jQuery判断元素是否在可视区域
$("#app").offset().top; offset().top表示 绝对偏移值,比如说有一个很长的页面,#app这个元素 在最底下, $("#app" ...
- 在页面制作的时候常用的html页面滚动加载,可视区域判断方法
演示图 考虑2个情况一种情况初始状态下 滚动到在中间区域的时候,这时上半部分看不见的元素就不给字体添加红色一种情况是,从头向下看的. 代码 .ss li { margin: 40px; } <d ...
- 如何判断元素是否在可视区域内--getBoundingClientRect
介绍 Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置. 根据MDN文档 getBoundingClientRect 方法返回的是一个DOMRect ...
- Vue-懒加载(判断元素是否在可视区域内)
上公式: 元素距离顶部高度(elOffsetTop) >= dom滚动高度(docScrollTop) 并且元素距离顶部高度(elOffsetTop) < (dom滚动高度 + 视窗高度) ...
- jq、js判断元素是否在可视区域内
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> ...
- GDI+如何判断一个点是否在区域内
https://msdn.microsoft.com/en-us/library/windows/desktop/ms533826(v=vs.85).aspx The purpose of hit t ...
- js 判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方。
前言:最近工作中,有这样一个场景,判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方.为了以后再次遇到,所以记录下来,并分享.转载请注明出处:https://www.cnblogs.com ...
- 【百度地图API】如何利用自己的数据制作社交地图?只显示可视区域内的标注
原文:[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注 摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内 ...
随机推荐
- Android中的文件权限操作
默认本工程创建的文件本工程对其有读写权限. 我们可以通过context.openFileOutput("文件名", 模式): 我们可以创建私有, 共有, 只读, 只写文件, 默认的 ...
- 如何在本机上将localhost改为www.dev.com
windows上安装好服务器后,打开本地目录 C:\Windows\System32\drivers\etc\ ,会看到有个hosts文件,打开后里面的代码为: # Copyright (c) - M ...
- 进程&线程
进程与线程的区别 什么是进程(Process):普通的解释就是,进程是程序的一次执行,而什么是线程(Thread),线程可以理解为进程中的执行的一段程序片段.在一个多任务环境中下面的概念可以帮助我们理 ...
- Python学习(8)字符串
目录 Python 字符串 Python 访问字符串中的值 Python 字符串更新 Python 转义字符 Python 字符串运算符 Python 字符串格式化 Python 三引号 Unicod ...
- mysql 变量
用户变量 1.用户变量,用户变量和数据库连接有关,连接后声明变量,连接断开后,自动消失. 2.用户变量以@开头,select一个没有赋值的用户变量,返回NULL,也就是没有值,注意取值为NULL与取值 ...
- ZendStudio的配置导出
File(文件)->Export(导 出),再弹出Export窗口中点击"General(常规)",选择"Preferences(首选项)" 点击&quo ...
- 接收ET采集器数据页面
<%@ page language="java" import="java.util.*,java.sql.*" pageEncoding="u ...
- Hbase之测试数据
info ship user name age height phone addr email dept salary create 'user','info','ship'; put 'user', ...
- shelve模块
#coding:utf-8 __author__ = 'similarface' #email:similarface@outlook.com ''' shelve模块: 映射容器 存储对象,被存储的 ...
- (转)springAOP解析-1
原文:http://hzbook.group.iteye.com/group/wiki/2261-Spring 3.1 Spring AOP概述 3.1.1 AOP概念回顾AOP是Aspect-O ...