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

找到几个关键因素:

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. ASP.net页面代码执行顺序

    <%=TextBox1 .Text%> <asp:TextBox ID="TextBox1" runat="server">abc< ...

  2. 软件测试第二次作业——Fault,Failure,Error辨析与设计测试用例

    Fault 静态错误 ,Failure 外部错误 ,Error 内部错误 问题答案 第一题 1.1 当数组x内的元素≥2时,该循环不会检测到x[0]这个元素. 1.2 test: x=[2, 3, 2 ...

  3. 解决 WPF AllowsTransparency = true 和 Webbrowser 等控件显示冲突

    代码: public class FormsWebBrowser { Window _owner; FrameworkElement _placementTarget; Form _form; AxA ...

  4. 最新ecshop v2.7.3版本去版权完全版

    该偏文章模板堂搜集总结,包括ecshop前台版权,ecshop后台版权,一个都不留,干干净净,推荐收藏 一.去掉网页标题 Powered by ECShop 打开includes/lib_main.p ...

  5. PowerDesigner怎样才能在修改表的字段Name的时候Code不自动跟着变

    怎样才能在修改表的字段Name的时候,Code不自动跟着变 tools-> General   Options-> Dialog:Operation   Modes: 去掉 NameToC ...

  6. 使用 FP-growth 算法高效挖掘海量数据中的频繁项集

    前言 对于如何发现一个数据集中的频繁项集,前文讲解的经典 Apriori 算法能够做到. 然而,对于每个潜在的频繁项,它都要检索一遍数据集,这是比较低效的.在实际的大数据应用中,这么做就更不好了. 本 ...

  7. Python 中的map和reduce学习笔记

    map和reduce都是Python中的内置函数 map函数接受两个参数,第一个参数是函数,第二个参数是列表,将函数依次作用于列表中的元素,并返回一个元素 reduce同样以函数和列表作为参数,区别在 ...

  8. Java设计模式(二) 工厂方法模式

    本文介绍了工厂方法模式的概念,优缺点,实现方式,UML类图,并介绍了工厂方法(未)遵循的OOP原则 原创文章.同步自作者个人博客 http://www.jasongj.com/design_patte ...

  9. EntityFramework 优化

    1.分页的时候,尽量在数据库里面去分页. //在数据库中分页 ).Take().ToList(); //先把数据从数据库中查出来,然后才分页 ).Take(); 2.尽量禁用延迟加载,尽量使用预加载和 ...

  10. help man info 三个的区别

    “--help”选项 “--help”是一个工具选项,大部分的GNU工具都具备这个选项,“--help”选项可以用来显示一些工具的信息 “man”工具 Man工具可以显示系统手册页中的内容,这些内容大 ...