直接上代码:

$(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. CF#335 Sorting Railway Cars

    Sorting Railway Cars time limit per test 2 seconds memory limit per test 256 megabytes input standar ...

  2. python 代码片段22

    #coding=utf-8 class AddressBookEntry(object): version=0.1 def __init__(self, name,phone): self.name ...

  3. BZOJ 1831 & 就是一个DP....

    题意: 比如说,4 2 1 3 3里面包含了5个逆序对:(4, 2), (4, 1), (4, 3), (4, 3), (2, 1). 可惜的是,由于年代久远,这些数字里有一部分已经模糊不清了,为了方 ...

  4. CSS抗锯齿 font-smoothing 属性介绍

    CSS3里面加入了一个“-webkit-font-smoothing”属性. 这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服. 加上之后就顿时感觉页面小清晰了. 淘宝也在用哦! 它有三 ...

  5. NOIP欢乐模拟赛 T2 解题报告

    小澳的坐标系 (coordinate.cpp/c/pas) [题目描述] 小澳者表也,数学者景也,表动则景随矣. 小澳不喜欢数学,可数学却待小澳如初恋,小澳睡觉的时候也不放过. 小澳的梦境中出现了一个 ...

  6. 【wikioi】2822 爱在心中

    题目链接 算法:Tarjan+dfs(最短路的都行,判连通而已) 先了解一下什么是Tarjan Tarjan算法用于求出图中所有的强连通分量. 转自NOCOW:点击打开链接 ============= ...

  7. BZOJ3456: 城市规划

    Description 刚刚解决完电力网络的问题, 阿狸又被领导的任务给难住了. 刚才说过, 阿狸的国家有n个城市, 现在国家需要在某些城市对之间建立一些贸易路线, 使得整个国家的任意两个城市都直接或 ...

  8. SpringMVC视图机制详解[附带源码分析]

    目录 前言 重要接口和类介绍 源码分析 编码自定义的ViewResolver 总结 参考资料 前言 SpringMVC是目前主流的Web MVC框架之一. 如果有同学对它不熟悉,那么请参考它的入门bl ...

  9. C语言(2)

    C语言(2)---变量 基本格式: 变量类型  变量名1[,变量名2,变量名3,...变量名n]: 注意: 1.在C语言中如果申请一个变量,里面存放小数,则用float表示,且在输出时需要注意prin ...

  10. Enumerators and Enumerable

    Next week task is to learn how generic enumeration interface works, try to build a sample and write ...