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

找到几个关键因素:

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. Javascript、CSS和IMG之网页执行探索

    测试环境:windows/chrome 实例1:页面中仅有图片 <html xmlns="http://www.w3.org/1999/xhtml"> <head ...

  2. Redis中struct运用

    c#操作缓存例如redis比较推荐ServiceStack 在redis中运用key-value存储数据,但是遇到结构体该如何处理,是类可通过get<type>(key)获得,那struc ...

  3. Android SDK ADT下载地址

    http://dl.google.com/android/android-sdk_rXX-windows.zip http://dl.google.com/android/ADT-X.X.X.zip ...

  4. 一个Java内存可见性问题的分析

    如果熟悉Java并发编程的话,应该知道在多线程共享变量的情况下,存在“内存可见性问题”: 在一个线程中对某个变量进行赋值,然后在另外一个线程中读取该变量的值,读取到的可能仍然是以前的值: 这里并非说的 ...

  5. 网站统计中的数据收集原理及实现(share)

    转载自:http://blog.codinglabs.org/articles/how-web-analytics-data-collection-system-work.html 网站数据统计分析工 ...

  6. [读书笔记]Java之动态分派

    以下内容来自周志明的<深入理解Java虚拟机>. 前一篇说了静态分派和重载有关,现在的动态分派就和覆盖Override有关了. 先看代码: public class DynamicDisp ...

  7. 写给笨蛋徒弟的学习手册(1)——完整C#项目中各个文件含义

    Bin 目录用来存放编译的结果,bin是二进制binrary的英文缩写,因为最初C编译的程序文件都是二进制文件,它有Debug和Release两个版本,分别对应的文件夹为bin/Debug和bin/R ...

  8. akka各模块

    Akka的模块化做得非常好,它为不同的功能提供了不同的Jar包. akka-actor-2.0.jar – 标准Actor, 有类型Actor,等等 akka-remote-2.0.jar – 远程A ...

  9. SQL_函数

    五毛叶 — SQL_函数: 如下: 1 SQL_Aggregate函数 AVG() - 返回平均值 COUNT() - 返回行数 FIRST() - 返回第一个记录的值 LAST() - 返回最后一个 ...

  10. MatLab/HR