如何用jquery判断元素是不是进入可视区域

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何用jquery判断元素是不是进入可视区域相关的知识,希望对你有一定的参考价值。

var top = obj.getBoundingClientRect().top //元素顶端到可见区域顶端的距离 var se = document.documentElement.clientHeight //浏览器可见区域高度。 if(top 参考技术A

用jquery来判断很简单的,上面“最佳答案”里根本就不是jquery里的方法:

function CheckIFView(id) 
    var t=$("#"+id).offset().top;    
    if (t >= $(window).scrollTop() && t < ($(window).scrollTop()+$(window).height()))       
        return true;    
    else     
        return false;    
    

//在线实例演示:http://www.aijquery.cn/html/jqueryjiqiao/62.html

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)) {

  //符合条件的进入里面

}

以上是关于如何用jquery判断元素是不是进入可视区域的主要内容,如果未能解决你的问题,请参考以下文章

如何判断元素在可视区域内

jquery判断元素是否出现在可视区

jquery判断iframe元素是不是在可视范围如果不是则滑动到可视区域

jquery 怎么判断 某个div 是不是进入可视区域,或者是滚动条拖拽到某个位置时,出发某个事件!

Canvas可视区与虚拟画布

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