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

找到几个关键因素:

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. codeforces 651C(map、去重)

    题目链接:http://codeforces.com/contest/651/problem/C 思路:结果就是计算同一横坐标.纵坐标上有多少点,再减去可能重复的数量(用map,pair存一下就OK了 ...

  2. 12、c#中事务及回滚

    public void UpdateContactTableByDataSet(DataSet ds, string strTblName) { try { SqlDataAdapter myAdap ...

  3. jquery.easyui代码详解,和遇到的问题,提供大家在使用的时候少走弯路(一)

    初次使用jquery.easyui这个东东,虽然简单,但还是很费力的去研究了一下使用,在使用过程中遇到的问题,下面代码会详细的注释到 引用的文件jquery.min.js              j ...

  4. 利用html5的画布canvas进行图片压缩处理

    在网上找的代码,按自己的需求改了下,忘记在哪找的了.这里记着方便自己以后学习. // 参数,最大高度 //var MAX_HEIGHT = 100; var MAX_WIDTH = 200; // 渲 ...

  5. C++学习笔记33:泛型编程拓展2

    调用标准模板库的find()函数查找数组元素 例子: #include <iostream> #include <algorithm> using namespace std; ...

  6. 托管到github上的网页图片在百度浏览器中显示不全

    这几天做了个较完整的网页放到github上,上传后看网页效果. 在Firefox浏览器中,显示正常. 在百度浏览器中,空了一大块位置(图片位置),偏偏只空了这一块,其它地方的图片都好好的. 点击f12 ...

  7. 小夜灯V2.0成本

    物料清单: Arduino Nano *1 17.98 HC-05主从机一体蓝牙模块  *1 15.9 RGB灯珠1W大功率带铝基板 *1 3.3 奶白灯罩 *1 32.5 锐澳9cm发光底座 *1 ...

  8. Java复习-oop

    我们可理解“纯粹”的面向对象程序设计方法是什么样的:(1) 所有东西都是对象.可将对象想象成一种新型变量:它保存着数据,但可要求它对自身进行操作.理论上讲,可从要解决的问题身上提出所有概念性的组件,然 ...

  9. 从输入 URL 到浏览器接收的过程中发生了什么事情

    从输入 URL 到浏览器接收的过程中发生了什么事情? 原文:http://www.codeceo.com/article/url-cpu-broswer.html 从触屏到 CPU  首先是「输入 U ...

  10. HTTP请求 GET POST 网络编程实现

      HTTP请求 GET POST 网络编程实现(转) 原文地址 http://bbs.neworigin.net/forum.php?mod=viewthread&tid=488 在开发网络 ...