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 ...
随机推荐
- 6.JAVA基础复习——JAVA中文档注释与帮助文档的生成
java中的文档注释:用于说明该类的功能作用方便他人使用关键词前需要加@符 用于类的注释 @author name 作者 @version v1.0 版本 …… 用于函数的注释 @param para ...
- Linux 开放端口号(mysql开启远程连接)
在 Centos 7 或 RHEL 7 或 Fedora 中防火墙由 firewalld 来管理,而不是 iptables. 一.firewalld 防火墙语法命令如下:启用区域端口和协议组合 fir ...
- delphi idhttp post 普通提交乱码处理
var IdHTTP1:TIdHTTP; postStream : TStringStream; Wstr:WideString; res:WideString; begin IdHTTP1 := T ...
- 根据RadioButtonList动态显示隐藏Div
使用场景 今天在写项目的时候遇到一个需求,注册页面,用户先选择类型继而填表单,所以需要根据选择切换表单,使用的前端框架是MiniUI,但是在实现这个功能的时候mini.get()方法无法得到div元素 ...
- VueScroller 使用
下载插件 npm install vue-scroller -D 引入插件: import Vue from 'vue'import VueScroller from 'vue-scroller' ...
- Vue/Egg大型项目开发（二）数据库设计
项目Github地址:前端(https://github.com/14glwu/stuer)后端(https://github.com/14glwu/stuer-server) 项目线上预览:http ...
- Linux 设置系统时间和时区2.Ubuntu
查看当前时间状态 timedatectl status 设置时区 sudo dpkg-reconfigure tzdata Asia shanghai
- windows中cmd常用命令收集
1.经常会启动端口后忘关,需要杀端口的命令:查找端口占用命令 netstat -ano|findstr 端口例如 (8081) 杀端口: taskkill /pid xxxxx - ...
- VFIO PF SRIOV IOMMU UIO概念解释、关联
1.UIO出现的原因 第一,硬件设备可以根据功能分为网络设备,块设备,字符设备,或者根据与CPU相连的方式分为PCI设备,USB设备等.它们被不同的内核子系统支持.这些标准的设备的驱动编写较为容易而且 ...
- 信息安全之路-web-xss学习(3)
DOM型xss DOM型xss属于在客户端执行的xss,并不经过服务端解析.测试过程如下 Low型: 源代码: <script> if (document.location.href.in ...