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 ...
随机推荐
- python各种转义字符
- bash 和sed 和gawk
bash内建命令 命令描述 : 扩展参数列表,执行重定向操作 . 读取并执行指定文件中的命令(在当前shell环境中) alias 为指定命令定义一个别名 bg 将作业以后台模式运行 bind 将键盘 ...
- Bugku-CTF之速度要快
Day21 速度要快 速度要快!!!!!! http://123.206.87.240:8002/web6/
- style1
<!doctype html> 我的简历 基本信息 姓名 张三 性别 男 应聘职位 WEb前端工程师 联系方式 手机 12312341234 Email joinefe@baidu.com ...
- （转）Illustrated: Efficient Neural Architecture Search ---Guide on macro and micro search strategies in ENAS
Illustrated: Efficient Neural Architecture Search --- Guide on macro and micro search strategies in ...
- (转载)Unity3D所要知道的基础知识体系大纲，可以对照着学习，不定期更新
本文献给,想踏入3D游戏客户端开发的初学者. 毕业2年,去年开始9月开始转作手机游戏开发,从那时开始到现在一共面的游戏公司12家,其中知名的包括搜狐畅游.掌趣科技.蓝港在线.玩蟹科技.天神互动.乐元素 ...
- Servlet使用注解配置URl提示404错误
刚接触servlet 3.0,使用注释描述servlet @WebServlet(name="FirstServlet", urlPatterns="/FirstServ ...
- linux下ifconfig命令看不到IP centos7——ens33
当前环境VMware15+centos7 在终端输入ifconfig后没有开到IP地址: 解决方法:root用户执行命令 cd /etc/sysconfig/network-scripts/ vi ...
- ssh连接所生成的known_hosts出现的问题
问题现场及解析 用OpenSSH的人都知ssh会把你每个你访问过计算机的公钥(public key)都记录在~/.ssh/known_hosts.当下次访问相同计算机时,OpenSSH会核对公钥.如果 ...
- asp.net 虹软 人脸识别 实现刷脸住宿、刷脸签到、刷脸进入等
先看看效果图,我把demo改成自动运行了,暂时借用别人的图片: 最左侧的大图为选择上传的, 中间的小图是大图的脸, 右侧的大图是人脸文件夹中已经存在的,并且相似度较高的一张脸,也就是比对的结果. 先记 ...