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 压缩文件安装遇到的问题及解决方案
第一步:从官网下载压缩文件(链接). 第二步:解压该文件,放置到想放到的位置.我的目录是在 C:\mysql\mysql-8.0.12-winx64 下. 第三步:在C:\mysql\mysql-8. ...
- windows 系统验证是否为正版
博客园里边写这种帖子,足以证明我有多无聊.话不多说,上干货. 一台计算器如果没有操作系统,就是一块大的板砖,拿起来抡人太重,放地上做床又太小. 如何查看自己操作系统呢?windows7 桌面找到我的电 ...
- 【mac微信小助手】WeChatPlugin使用教程！
微信小助手 mac版集微信防撤回和微信多开等诸多功能于一身,可以有效的阻止朋友微信撤回消息,还能开启无手机验证登录,再也不用每次登录扫码验证啦,非常方便! wechatplugin mac版安装教 ...
- 基础JAVA程序设计 （多个类方法的实现）
模拟实现家庭购买电视.要求: (1) 电视类(TV)属性: channel : int , 1 代表CCTV-1,2代表CCTV-2-- 方法: 设置频道setChannel(int i) , 获取 ...
- Scrum Meeting 合集
一.Alpha [Alpha]Scrum meeting 1 [Alpha]Scrum meeting 2 [Alpha]Scrum meeting 3 [Alpha]Scrum meeting 4 ...
- day16
列表生成式语法[表达式 for in 遍历 if 条件]会从li一次去除所有值,进行判断 如果满足条件 就装到新的列表里 生成数据的函数函数体中又yield关键字yield 暂停函数的执行 还能返回一 ...
- 在Pycharm中使用Pandas时输出结果中列被省略的解决办法
在使用pycharm学习pandas的过程中我发现好多时候会发生不能输出所有列的情况,上网搜了一下,发现解决的办法是使用一个输出控制的函数. 在下面的代码中我们只是输出starbucks_store_ ...
- [转载]解决"command 'gcc' failed with exit status 1"错误问题
转自:https://blog.csdn.net/learn_tech/article/details/80066583 解决"command 'gcc' failed with exit ...
- css复合选择器的权重
选择器的权重 标签选择器的权重为0001 class选择器的权重为0010 id选择器的权重为0100 属性选择器的权重为0010 伪类选择器的权重为0010 伪元素选择器的权重为0010 包含选择器 ...
- hbuilder + 夜神模拟器
1. 安装hbuilder.夜神模拟器 2. 将夜神模拟器设为手机版,启用急速模式 3. 打开夜神模拟器设置,进入关于手机,点击版本号启用开发者模式 4. 进入开发者模式设置,启用usb调试 5. h ...