jQuery 怎么判断DIV出现在可视区域
直接上代码:
$(window).scroll(function () {
var oT = document.getElementById("myDiv").offsetTop;
if (oT >= $(window).scrollTop() && oT < ($(window).scrollTop() + $(window).height())) {
console.log("div出现在可视范围");
}
});
其中 .offsetTop 是原生写法,也可以用jQuery的写法 $(element).offset().Top()
此代码适用于 Html5网站往下滑动时 逐渐显示的 CSS3 animate 动画效果
jQuery 怎么判断DIV出现在可视区域的更多相关文章
- 如何判断元素是否在可视区域ViewPort
个性签名: 生如夏花,逝如冬雪:人生如此,何悔何怨. 前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth,clientWidth,scrollWidth,scrollTop这几个 ...
- 使用jQuery判断元素是否在可视区域
$("#app").offset().top; offset().top表示 绝对偏移值,比如说有一个很长的页面,#app这个元素 在最底下, $("#app" ...
- 如何判断一个Div是否在可视区域,判断div是否可见
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jq、js判断元素是否在可视区域内
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> ...
- jquery如何判断div是否隐藏--useful
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Vue-懒加载(判断元素是否在可视区域内)
上公式: 元素距离顶部高度(elOffsetTop) >= dom滚动高度(docScrollTop) 并且元素距离顶部高度(elOffsetTop) < (dom滚动高度 + 视窗高度) ...
- 如何判断元素是否在可视区域内--getBoundingClientRect
介绍 Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置. 根据MDN文档 getBoundingClientRect 方法返回的是一个DOMRect ...
- JQuery判断div(控件)是否为隐藏
以下是JavaScript 中判断div是否为隐藏代码引用片段: if (div.style.display == "none") { div.style.display = &q ...
- Ztree插件,定位节点时(focus)不能进入可视区域BUG解决方案
相关插件版本: jquery.ztree.exedit-3.4.js jquery.ztree.all-3.4.js jquery-1.8.0.js function onAsyncSuccess(e ...
随机推荐
- POJ3680 Intervals(最小费用最大流)
选择若干条线段使权值最大,并且点覆盖次数不超过k. 建图如下:vs到0建立容量为k费用为0的边:坐标终点到vt连接一条容量为k费用为0的边:对于每两个相邻坐标连接一条容量为INF费用为0的边:对于线段 ...
- 51nod p1175 区间中第K大的数
1175 区间中第K大的数 基准时间限制:1 秒 空间限制:131072 KB 分值: 160 难度:6级算法题 一个长度为N的整数序列,编号0 - N - 1.进行Q次查询,查询编号i至j的所有 ...
- outlook——还原“未读邮件”文件夹
参考链接:http://office.microsoft.com/zh-cn/outlook-help/HA010283248.aspx 摘抄: 还原“未读邮件”文件夹 全部显示 全部隐藏 “未读邮件 ...
- 【python游戏编程之旅】第六篇---pygame中的Sprite(精灵)模块和加载动画
本系列博客介绍以python+pygame库进行小游戏的开发.有写的不对之处还望各位海涵. 直到现在我们已经学了很多pygame基础知识了,从这篇博客开始我们将会学习pygame中高级部分,更多和精灵 ...
- requestAnimationFrame制作动画:旋转风车
在以往,我们在网页上制作动画效果的时候,如果是用javascript实现,一般都是通过定时器和间隔来实现的,出现HTML5之后,我们还可以用CSS3 的transitions和animations很方 ...
- hdu 1097 A hard puzzle
Problem Description lcy gives a hard puzzle to feng5166,lwg,JGShining and Ignatius: gave a and b,how ...
- Android Fragment 生命周期及其API使用(建议使用自定义View替换Fragment)
我为什么不主张使用Fragment Fragment:( Fragment就相当于一个有生命周期的View,它的生命周期被所在的Activity的生命周期管理 ) 生命周期回调说明: onAttach ...
- 彻底弄明白之数据结构中的KMP算法
如何加速朴素查找算法? KMP,当然还有其他算法,后续介绍. Knuth–Morris–Pratt string search algorithm Start at LHS of strin ...
- CF 55D. Beautiful numbers(数位DP)
题目链接 这题,没想出来,根本没想到用最小公倍数来更新,一直想状态压缩,不过余数什么的根本存不下,看的von学长的blog,比着写了写,就是模版改改,不过状态转移构造不出,怎么着,都做不出来. #in ...
- 预定义指令之debug
1)根据你必须知道的.NET一书, #define DEBUG class Program { static void Main(string[] args) { #if DEBUG Console. ...