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

最新推荐文章于 2024-03-31 09:00:00 发布

转载最新推荐文章于 2024-03-31 09:00:00 发布 · 7k 阅读

JS 专栏收录该内容

58 篇文章

订阅专栏

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

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