zoukankan      html  css  js  c++  java
  • javascript判断某种元素是否进入可视区域

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

    找到几个关键因素:

    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

    {

      //在可视范围内

    }

  • 相关阅读:
    新年新方向-斩获新职位
    专利之家:让灵感冒冒泡
    转帖:专利之家
    WPF:Localization 基础
    WPF教程.002
    有关XXX产品研发管理约定
    转帖:曲线路标北京前门上岗
    超出想象-超级终端显示器
    小e的每日一画 之 小男孩在太阳下敬礼 20080102
    小e的每日一画 之 飞毯旅行记 20071231
  • 原文地址:https://www.cnblogs.com/ck168/p/5621946.html
Copyright © 2011-2022 走看看