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

找到几个关键因素:

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. js 正则表达式 转至(七郎's Blog)

    //匹配帐号是否合法(字母开头,允许5-16字节,允许字母数字下划线 var re =new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,19}$"); if( ...

  2. Android WebView 保存cache至External Storage

    源博客: http://www.devahead.com/blog/2012/01/saving-the-android-webview-cache-on-the-sd-card/ 其中心思想是,通过 ...

  3. 简单C程序生成的汇编代码分析

    首先给出完整的C代码: int g(int x) { ; } int f(int x) { return g(x); } int main(void) { )+; } 使用命令:gcc –S –o h ...

  4. shell脚本入门及基本元素

    命令和参数 #!/bin/sh 其中#!用来告诉系统它后面的参数是用来执行该文件的程序,必须放在脚本的首行,不然会在执行脚 本 的时候报错.当一个文件开头的两个字符是#!时,内核会扫描其它的部分看是否 ...

  5. Resharp注册码

    admin@youbaozang.comSpFEMUSrPM0AGupqlNs6J1Ey7HrjpJZy admin@wuleba.comd6GuozPm+bsCmPOtyJ2w1ggRnCr3Vk5 ...

  6. re模块详解

    #!/usr/bin/env python #-*- coding:UTF-8 -*- ##################################################### # ...

  7. maven - dependencies与dependencyManagement的区别

    1.DepencyManagement应用场景 当我们的项目模块很多的时候,我们使用Maven管理项目非常方便,帮助我们管理构建.文档.报告.依赖.scms.发布.分发的方法.可以方便的编译代码.进行 ...

  8. 关于 escape、encodeURI、encodeURIComponent

    参考资料:http://hi.baidu.com/flondon/item/983b3af35b83fa13ce9f3291   http://www.w3school.com.cn/js/jsref ...

  9. 各种报错各种坑 webpack让我在学习的过程中一度想要放弃

    由于拓展部分不是必须的,只是可以增强用户体验,但是有些时候页面给分页预留的位置不够,这个时候我们就可以通过设置来除去这一部分 子分区由两种创建方法,一种是不定义每个子分区子分区的名字和路径由分区决定, ...

  10. JS this指向问题

    <button onclick=(function(){alert(this)})()>I'm button</button>//this指代window <button ...