判断是否在指定的可视区域内,先用最简单的方式,比如整个页面为可视区域

找到几个关键因素:

sTop= $(window).scrollTop();  //滚动条距顶部的高度

clientHeight= document.documentElement.clientHeight; //可视区域的高度

pos =  = $("#pointinfo_" + markers[i].id).offset().top;    //指定的元素上方距顶部的高度

pos1  = $("#pointinfo_" + markers[i].id).height()+pos;   //指定的元素下方距顶部的高度

所以就可以根据这个公式判断是否在可视区域内了

if ((sTop+clientHeight >= pos && sTop+clientHeight <= pos1) || (sTop >= pos && sTop <= pos1)) {

  //符合条件的进入里面

}

//如果在页面指定特定的区域为可视区域,还需在调整一下,比如,页面的上方有一定的固定区域,我们可以这么来判断:

比如上方区域的高度为headerHeight

var seTop=sTop+clientHeight-headerHeight;

var shTop=sTop+headerHeight;

所以引用公式就是:

if ((seTop >= pos && seTop <= pos1) || (shTop >= pos && shTop <= pos1)) {

  //符合条件的进入里面

}

比较靠谱的方法:

var sTop = $(window).scrollTop();                                         //滚动条距离顶端的高度
var se = document.documentElement.clientHeight;                //浏览器的高度

var headerHeight = $("#header").height() + 10;                    //页面表头的高度

var seTop = sTop + se - headerHeight;
var shTop = sTop + headerHeight;

var pos_current = $("#").offset().top;
var pos1_current = $("#").height() + pos_current;

if ((shTop > pos1_current) || seTop < pos_current) {

  //超出可是范围了

}

else

{

  //在可视范围内

}

javascript判断某种元素是否进入可视区域的更多相关文章

  1. JS代码片段:判断一个元素是否进入可视区域

    // Determine if an element is in the visible viewport function isInViewport(element) { var rect = el ...

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

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

  3. javascript判断一个元素是另外一个元素的子元素

    javascript判断一个元素是另外一个元素的子元素用途有很多,最常用的就是当点击页面的空白处去执行某些操作,比如弹出层等. function isParent (obj,parentObj){ w ...

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

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

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

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

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

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

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

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

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

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

  9. 原生js获取 一个dom元素距离页面可视区域的位置值 -- getBoundingClientRect

    getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bottom.分别表示元素各边与页面上边和左边的距离. var box=docum ...

随机推荐

  1. linux删除文件后沒有释放空间

    在Linux或者Unix系统中,通过rm或者文件管理器删除文件将会从文件系统的文件夹结构上解除链接(unlink).然而假设文件是被 打开的(有一个进程正在使用),那么进程将仍然能够读取该文件,磁盘空 ...

  2. JDK和IDE

    IDE 集成开发环境(IDE,Integrated Development Environment )是用于提供程序开发环境的应用程序,一般包括代码编辑器.编译器.调试器和图形用户界面工具.集成了代码 ...

  3. 如何书写高质量的jQuery代码

    想必大家对于jQuery这个最流行的javascript类库都不陌生,而且只要是前端开发人员肯定或多或少的使用或者接触过,在今天的这篇文章中,参考了一些资料及实际使用效率,将介绍一些书写高质量jQue ...

  4. 解析C#开发过程常见的编程模式

    单例模式: 在多线程的程序开发过程中经常会遇到单例模式[单件模式],它的特点是不是根据客户程序的调用而生成新的实例,而是控制某个类型的实例数量只有一个.也就是说,单例模式就是保证在整个应用程序的生命周 ...

  5. ubuntu安装rpm包

    ubuntu下的rpm包的安装方法 一般是不能够直接安装的,我们需要一个工具叫alien,先install它吧.然后按照下面择所需. 1.直接安装: alien -i -c filename.rpm ...

  6. Mac 下如何使用 Tree 命令

    方式一 Mac 系统下默认是不带这条命令的,执行下面这条命令也可以打印出树状结构. find . -print | sed -e 's;[^/]*/;|____;g;s;____|; |;g' 不想每 ...

  7. python 字符串编码转换

    import chardetdef CheckCode(filename): adchar=chardet.detect(filename) if adchar['encoding']=='utf-8 ...

  8. Ubuntu vi 常用命令集合

    :w 保存文件但不退出vi:w file 将修改另外保存到file中,不退出vi:w! 强制保存,不推出vi:wq 保存文件并退出vi:wq! 强制保存文件,并退出viq: 不保存文件,退出vi:q! ...

  9. CCI4.5/LintCode Validate Binary Search Tree

    Validate BST是指按中序遍历niorder后左<node<右: 第一种方法: 先按inoreder遍历, 再放进ArrayList里用循环看是不是从小到大排序: 注意: 设置成员 ...

  10. 《我是一只IT小小鸟》读书笔记

    大一进来的第一个学期 我对我所读的软件工程专业感到迷茫与不知.就这么昏昏沉沉的度过了一个学期,第二个学期一开始,在上第一节新增加的“大学生创业与指导”课程充满了好奇,在课上老师推荐的一本书<我是 ...