如何判断一个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外,还有一个办法.那就是,只显示可视区域内 ...
随机推荐
- FPM的远程利用
看了lijiejie的博客,和乌云的PHPFastCGI的这篇文章,感觉在实际的业务中经常能遇到,所以在此记录下来: 原文:http://www.lijiejie.com/fastcgi-read-f ...
- C#强制清除缓存
#region 强制清除缓存 [DllImport("kernel32.dll", EntryPoint = "SetProcessWorkingSetSize" ...
- bzoj 1467: Pku3243 clever Y 扩展BSGS
1467: Pku3243 clever Y Time Limit: 4 Sec Memory Limit: 64 MB[Submit][Status][Discuss] Description 小 ...
- 51nod 1413 权势二进制 背包dp
1413 权势二进制 题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB 一个十进制整数被叫做权势二进制,当他的十进制表示的时候只由0或1组成.例如0,1,101, ...
- 个人博客Week3
必应软件客户端测评 话不多说 先来一张高大上的客户端界面截图! 首先 映入眼帘的就是四个主要的模块!(1)词典(2)例句(3)翻译(4)应用 (1)词典: 在查询词条的时候,一旦查询了一个词条就不能够 ...
- iOS - UIPickerView
前言 NS_CLASS_AVAILABLE_IOS(2_0) __TVOS_PROHIBITED @interface UIPickerView : UIView <NSCoding, UITa ...
- 进击的Hybrid App,量身定做缓存机制
引用张图,简单粗俗的解释下 Native App.Web App 和 Hybrid App Navtie App: 使用平台系统提供的原生语言来编写的 App,如果Android用java,ios用o ...
- 26个Jquery使用小技巧
下面列出了一些Jquery使用技巧.比如有禁止右键点击.隐藏搜索文本框文字.在新窗口中打开链接.检测浏览器.预加载图片.页面样式切换.所有列等高.动态控制页面字体大小.获得鼠标指针的X值Y值.验证元素 ...
- Oracle冷备份及其恢复
一. 冷备份的概念 冷备份是指在数据库关闭状态下所做的物理拷贝,也称脱机备份. 适合于非归档模式下的备份,而且也只能采用这种方式备份. 二. 需要备份的文件 必须备份的文件: 数据文件和控制文件 可以 ...
- Linux小知识
1,ubuntu下,开机如何进行命令行? 图形模式下,首先进入终端: 1. 找到 /etc/default/grub文件: 2. 修改 GRUB_CMDLINE_LINUX_DEFAULT=" ...