直接上代码:

$(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出现在可视区域的更多相关文章

  1. 如何判断元素是否在可视区域ViewPort

    个性签名: 生如夏花,逝如冬雪:人生如此,何悔何怨. 前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth,clientWidth,scrollWidth,scrollTop这几个 ...

  2. 使用jQuery判断元素是否在可视区域

    $("#app").offset().top; offset().top表示 绝对偏移值,比如说有一个很长的页面,#app这个元素 在最底下,  $("#app" ...

  3. 如何判断一个Div是否在可视区域,判断div是否可见

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jq、js判断元素是否在可视区域内

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> ...

  5. jquery如何判断div是否隐藏--useful

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Vue-懒加载(判断元素是否在可视区域内)

    上公式: 元素距离顶部高度(elOffsetTop) >= dom滚动高度(docScrollTop) 并且元素距离顶部高度(elOffsetTop) < (dom滚动高度 + 视窗高度) ...

  7. 如何判断元素是否在可视区域内--getBoundingClientRect

    介绍 Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置. 根据MDN文档 getBoundingClientRect 方法返回的是一个DOMRect ...

  8. JQuery判断div(控件)是否为隐藏

    以下是JavaScript 中判断div是否为隐藏代码引用片段: if (div.style.display == "none") { div.style.display = &q ...

  9. Ztree插件,定位节点时(focus)不能进入可视区域BUG解决方案

    相关插件版本: jquery.ztree.exedit-3.4.js jquery.ztree.all-3.4.js jquery-1.8.0.js function onAsyncSuccess(e ...

随机推荐

  1. UVa1486 Transportation(最小费用最大流)

    题目大概说有n个城市,m条有向边连着它们,每条边都有两个属性一个是ai一个是ci,ai表示运送x单位货物时花费ai*x*x的价钱,ci表示边最多能运送的货物数量(<=5).问从城市1运送k单位货 ...

  2. rJava包---R与Java的接口

    1.安装 版本说明:Win10+R3.2.5+JKD1.7+eclipse-jee-mars-R-win32-x86_64 install.packages("rJava") 2. ...

  3. 10.24给TA的话

  4. python 代码片段21

    #coding=utf-8 @doco def foo(): pass ''' deco把foo函数拿过来,加上一些额外的功能再重新赋值给foo,如下 ''' foo=deco(foo) def lo ...

  5. BZOJ1841 : 蚂蚁搬家

    树分治,对于每个分治结构,维护两棵线段树. 第一棵按dfs序维护所有点到重心的距离,第二棵维护每个分支的最长链. 那么当前结构对答案的贡献就是第二棵线段树的最大值$+$次大值. 对于操作$0$,如果是 ...

  6. BZOJ4435 : [Cerc2015]Juice Junctions

    最大流=最小割,而因为本题点的度数不超过3,所以最小割不超过3,EK算法的复杂度为$O(n+m)$. 通过分治求出最小割树,设$f[i][j][k]$表示最小割为$i$时,$j$点在第$k$次分治过程 ...

  7. 为什么C#不使用多继承?(from stackoverflow)

    简单地说:是因为该语言的设计者决定不使用. 基本上,.NET和Java的设计者不使用多继承(MI),是因为他们认为给语言加上多继承获得的好处较少,抵不上因此增加的复杂性. 1.不同的语言对于多继承如何 ...

  8. CentOS 6.7安装Mysql 5.7

    Step1: 检测系统是否自带安装mysql # yum list installed | grep mysql Step2: 删除系统自带的mysql及其依赖命令: # yum -y remove ...

  9. GO语言练习:channel select 超时机制

    1.代码 2.运行 3.解析 1.代码 package main import ( "time" "fmt" ) func waitFor(ch chan in ...

  10. css3很酷的加载动画多款

    在线实例:http://www.admin10000.com/document/3601.html 源码:https://github.com/tobiasahlin/SpinKit