jq、js判断元素是否在可视区域内
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body { height: 2000px; position: relative;}
.box {
position: absolute;
z-index: 9;
left: 0;
top: 1000px;
width: 100px;
height: 100px;
background-color: #f45;
}
</style>
</head>
<body>
<div class="box"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
(function ($) {
$(document).on('scroll', function () {
var obj = $('.box');
var clientHeight = $(window).height();
var scrollTop = $(document).scrollTop();
var offsetTop = obj.offset().top;
var objHeight = obj.height();
if(offsetTop < scrollTop + clientHeight && offsetTop + objHeight > scrollTop) {
console.log('u can see me!')
}
})
window.onscroll = function () {
var obj = document.getElementsByClassName('box')[0];
var clientHeight = window.innerHeight;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var offsetTop = obj.offsetTop;
var objHeight = obj.offsetHeight;
if(offsetTop < scrollTop + clientHeight && offsetTop + objHeight > scrollTop) {
console.log('u can see me!')
}
}
})(jQuery);
</script>
</body>
</html>
jq、js判断元素是否在可视区域内的更多相关文章
- 如何判断元素是否在可视区域内--getBoundingClientRect
介绍 Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置. 根据MDN文档 getBoundingClientRect 方法返回的是一个DOMRect ...
- Vue-懒加载(判断元素是否在可视区域内)
上公式: 元素距离顶部高度(elOffsetTop) >= dom滚动高度(docScrollTop) 并且元素距离顶部高度(elOffsetTop) < (dom滚动高度 + 视窗高度) ...
- 如何判断元素是否在可视区域ViewPort
个性签名: 生如夏花,逝如冬雪:人生如此,何悔何怨. 前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth,clientWidth,scrollWidth,scrollTop这几个 ...
- 使用jQuery判断元素是否在可视区域
$("#app").offset().top; offset().top表示 绝对偏移值,比如说有一个很长的页面,#app这个元素 在最底下, $("#app" ...
- 【百度地图API】如何利用自己的数据制作社交地图？只显示可视区域内的标注
原文:[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注 摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内 ...
- js 判断一个元素是否在滚动的可视区域内，不在就固定到可视区域的上方。
前言:最近工作中,有这样一个场景,判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方.为了以后再次遇到,所以记录下来,并分享.转载请注明出处:https://www.cnblogs.com ...
- javascript判断某种元素是否进入可视区域
判断是否在指定的可视区域内,先用最简单的方式,比如整个页面为可视区域 找到几个关键因素: sTop= $(window).scrollTop(); //滚动条距顶部的高度 clientHeight= ...
- js判断元素是否是disable状态
js判断元素是否是disable状态 jquery判断元素状态用$(select).prop(属性值) == true js判断button是否可以点击: //判断button是否为不可点击状态 if ...
- scrollIntoView 前的元素滚动到浏览器窗口的可视区域内 不止垂直滚动，还有水平滚动
Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内 element.scrollIntoView(); // 等同于element.scrollIntoVi ...
随机推荐
- Net Core API网关Ocelot
Ocelot在github的地址 https://github.com/TomPallister/Ocelot , 非常给力的是在课程当天完成了.NET Core 2.0的升级,升级过程请看https ...
- c# 调用RDP和SSH实现远程登陆
1.ssh的登陆实现: windows平台可以安装OpenSSHforWindows 后,可以通过cmd 执行ssh的指令. 也可以在c#编程中实现ssh的登陆: var p = new System ...
- GPIO8种方式小总结
在输出3时写1时上反向为0,下为1,1时MOS不接通,0接通 为1时上导通输出高电平1: 为0时下导通输出低电平0: VDD为逻辑电源正 VSS为逻辑地 若为输出状态则施密特触发器总为开 然后经过上拉 ...
- Java实训作业1
1.编写程序:声明一个整型变量a,并赋初值5,在程序中判断a是奇数还是偶数,然后输出判断的结果 2.编写程序:从键盘输入圆的半径,计算圆的面积并输出. 3.编写程序:实现一个数字加密器.运行时输入加密 ...
- freopen()函数在ACM中的使用
#ifndef ONLINE_JUDGE freopen("in.txt","r",stdin); #endif https://blog.csdn.net/c ...
- 【做题】ECFinal2018 J - Philosophical … Balance——dp
原文链接 https://www.cnblogs.com/cly-none/p/ECFINAL2018J.html 题意:给出一个长度为\(n\)的字符串\(s\),要求给\(s\)的每个后缀\(s[ ...
- Mybatis学习之一
mybatis是目前市面上最流行的ORM框架之一,作为JavaEE程序员,在工作中不可能不用到mybatis.所以为了工作,为了学习,为了个人的发展,每个JavaEE程序员都要学习,学会mybatis ...
- 动态生成具有嵌套属性的linq选择(select)
class SelectItem { public string Item { get; set; } } class SelectList { public int ID { get; set; } ...
- SetForegroundWindow Win32-API not always works on Windows-7
BIG NOTE After messing with this API for the last 2 months, the solution/s below are all not stable ...
- springboot整合ActiveMQ，配置问题
1.ActiveMQ的安装和相关配置修改 去官网下载安装包解压至文件夹 双击打开 打开浏览器输入 http://127.0.0.1:8161 到此activeMQ就安装好了 2.springboot工 ...