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 ...
随机推荐
- mysql恢复备份数据时，部分表数据丢失的问题
原因:是由于默认的通信缓冲区的最大长度为50M(max_allowed_packed). 处理办法: //查看当前max_allowed_packet的大小 show global variables ...
- 初步了解，vue的转发机制（proxyTable）
vue的转发机制(proxyTable),proxyTable代理功能可以实现转发机制,需要修改config里面修改index.js文件 修改index.vue中请求的代码(该功能是webpack-s ...
- 7.JAVA基础复习——JAVA中的设计模式单例模式
设计模式:是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代码可靠性. 总体来说设计模式分为23种三大类: 创建型模式,共 ...
- RHCSA
系统管理 redhat 7 破解修改root密码 修改系统主机名 修改系统地址掩码网关 创建系统默认软件仓库 安装系统内核升级 绑定到外部验证服务LDAP.配置 autofs 用户组管理 创建用户组 ...
- LGOJ P3919【模板】可持久化数组（可持久化线段树/平衡树）
代码 //可持久化线段树 #include <cstdio> using namespace std; struct node { node *Lnode,*Rnode; int val; ...
- Java 基础知识点小结
小知识点 所有的程序,都要定义在类里面: 异常 定义方法时,使用 throws 可以用来捕获方法体内没有捕获的异常,然后以 SomeException 抛出异常 java是解释型语言.java虚拟机能 ...
- EF的优缺点
优点: 1.简洁的Linq to Sql语句大大提高了开发人员的效率,不要再写复杂的sql语句: 2.不再需要再管应用程序如何去连接数据库: 3.EF可以用作用于数据服务和OData Service的 ...
- webpack学习笔记 (三) webpack-dev-server插件和HotModuleReplacementPlugin插件使用
webpack-dev-server插件 webpack-dev-server是webpack官方提供的一个小型Express服务器.使用它可以为webpack打包生成的资源文件提供web服务. we ...
- linux批量配置ip
获取使用的网卡接口 ip a 2.查看系统版本 cat /etc/redhat-release 3.执行配置脚本 wget http://d.sshby.com/biaozhun.tar&& ...
- Adobe Photoshop安装
Photoshop cc2018安装 Adobe 软件套装已不再以 (Creative Suite) CS命名,而是改成 (Creative Cloud) CC,主推云服务!Adobe CC 套装中总 ...