您的位置:首页 > Web前端 > JavaScript

javascript判断某种元素是否进入可视区域

2016-06-27 23:49 465 查看
判断是否在指定的可视区域内,先用最简单的方式,比如整个页面为可视区域

找到几个关键因素:

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

{

  //在可视范围内

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: