如何判断一个div是否在页面可视区域内

shitouPlus

于 2015-11-05 13:17:12 发布

阅读量7k

点赞数

分类专栏： JS

JS 专栏收录该内容

58 篇文章

订阅专栏

本文介绍了一种使用jQuery监测页面中特定元素是否进入可视区域的方法。通过获取元素的位置并与当前滚动条位置进行比较，可以判断该元素是否出现在用户的可视范围内。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 
 <html> 
 
 <head> 
 
 <title>js</title> 
 
 <script src= 
 "http://code.jquery.com/jquery-latest.js"  
 type= 
 "text/javascript" 
 ></script> 
 
 <script type= 
 "text/javascript" 
 > 
 
 $(document).ready( 
 function  
 () { 
 
 $(window).scroll( 
 function  
 () { 
 
 var  
 a = document.getElementById( 
 "eq" 
 ).offsetTop; 
 
 if  
 (a >= $(window).scrollTop() && a < ($(window).scrollTop()+$(window).height())) { 
 
 alert( 
 "div在可视范围" 
 ); 
 
 } 
 
 }); 
 
 }); 
 
 </script> 
 
 </head> 
 
 <body> 
 
 <div style= 
 "width:1px;height:2000px;" 
 ></div> 
 
 <div id= 
 "eq"  
 style= 
 " width:100px; height:100px; background-color:Red;" 
 >1</div> 
 
 <div style= 
 "width:1px;height:2000px;" 
 ></div> 
 
 </body> 
 
 </html>