前言

人眼可见区域（document.body.clientWidth，document.body.clientHeight）
网页可见区域（document.documentElement.clientWidth，document.documentElement.clientHeight）

判断元素是否在网页可见区域内

$.fn.isOnHtmlScreen = function(){var win = $(window);var viewport = {top : 0,left : 0};viewport.right = viewport.left + win.width();viewport.bottom = viewport.top + win.height();var bounds = this.offset();bounds.right = bounds.left + this.outerWidth();bounds.bottom = bounds.top + this.outerHeight();return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};

判断元素是否在人眼可见区域内

$.fn.isOnVisibleScreen = function(){var win = $(window);var viewport = {top : win.scrollTop(),left : win.scrollLeft()};viewport.right = viewport.left + document.body.clientWidth;viewport.bottom = viewport.top + document.body.clientHeight;var bounds = this.offset();bounds.right = bounds.left + this.width();bounds.bottom = bounds.top + this.height();return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};

isOnVisibleScreen 示例

<html>
<header>
<script crossorigin="anonymous" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" src="https://lib.baomitu.com/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$.fn.isOnVisibleScreen = function(){var win = $(window);var viewport = {top : win.scrollTop(),left : win.scrollLeft()};viewport.right = viewport.left + document.body.clientWidth;viewport.bottom = viewport.top + document.body.clientHeight;var bounds = this.offset();bounds.right = bounds.left + this.width();bounds.bottom = bounds.top + this.height();return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));};
function changeBtn() {if (!$('.item:eq(0)').isOnVisibleScreen()) {$(".rightFlatBar div:eq(0)").fadeIn(1000);$(".rightFlatBar div:eq(1)").fadeIn(1000);} else {$(".rightFlatBar div:eq(0)").fadeOut(1000);$(".rightFlatBar div:eq(1)").fadeOut(1000);}if (!$('.item:eq(1)').isOnVisibleScreen()) {$(".rightFlatBar div:eq(2)").fadeIn(1000);} else {$(".rightFlatBar div:eq(2)").fadeOut(1000);}if (!$('.item:eq(2)').isOnVisibleScreen()) {$(".rightFlatBar div:eq(3)").fadeIn(1000);} else {$(".rightFlatBar div:eq(3)").fadeOut(1000);}if (!$('.item:eq(3)').isOnVisibleScreen()) {$(".rightFlatBar div:eq(4)").fadeIn(1000);} else {$(".rightFlatBar div:eq(4)").fadeOut(1000);}if (!$('.item:eq(4)').isOnVisibleScreen()) {$(".rightFlatBar div:eq(5)").fadeIn(1000);} else {$(".rightFlatBar div:eq(5)").fadeOut(1000);}
}
$(function(){changeBtn();$(window).scroll(changeBtn);$(".rightFlatBar div:eq(0)").click(function(){$('html,body').scrollTop(0);});$(".rightFlatBar div:eq(1)").click(function(){$('html,body').animate({scrollTop:$('.item:eq(0)').offset().top}, 1000);});$(".rightFlatBar div:eq(2)").click(function(){$('html,body').animate({scrollTop:$('.item:eq(1)').offset().top - 30}, 1000);});$(".rightFlatBar div:eq(3)").click(function(){$('html,body').animate({scrollTop:$('.item:eq(2)').offset().top - 30}, 1000);});$(".rightFlatBar div:eq(4)").click(function(){$('html,body').animate({scrollTop:$('.item:eq(3)').offset().top}, 1000);});$(".rightFlatBar div:eq(5)").click(function(){$('html,body').animate({scrollTop:$('.item:eq(4)').offset().top}, 1000);});
});
</script>
<style type="text/css">
*{margin:0;}
.item{width: 100%;height: 300px;padding: 100px 0 0 100px;
}
.item:nth-of-type(even){background: #abc;color: #fff;
}
.item:nth-of-type(odd){background: #fff;color: #333;
}
.rightFlatBar {position: fixed;right: 5px;bottom: 0px;width: 60px;height: auto;
}
.rightFlatBar div{display: none;width: 60px;height: 60px;margin-bottom: 5px;border: 1px solid #ececec;border-radius: 5px;transition: .3s;box-shadow: 0px 0px 3px rgba(0,0,0,0.08);text-align:center;line-height: 60px;background: #fff;cursor:hand;
}</style>
</header><body><div><div class="item"><h1>条目1</h1></div><div class="item"><h1>条目2</h1></div><div class="item"><h1>条目3</h1></div><div class="item"><h1>条目4</h1></div><div class="item"><h1>条目5</h1></div></div><div class="rightFlatBar"><div>顶部</div><div>条目1</div><div>条目2</div><div>条目3</div><div>条目4</div><div>条目5</div></div>
</body>
</html>

参考

https://www.xuebuyuan.com/171078.html
https://www.cnblogs.com/whb17bcdq/p/6513766.html

可见区域示例

<html>
<header>
<script crossorigin="anonymous" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" src="https://lib.baomitu.com/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){console.log("w={},h={}", document.body.clientWidth, document.body.clientHeight);console.log("w={},h={}", $(document.body)[0].clientWidth, $(document.body)[0].clientHeight);console.log("w={},h={}", document.documentElement.clientWidth, document.documentElement.clientHeight);console.log("w={},h={}", window.screen.width, window.screen.height);console.log("w={},h={}", window.screen.availWidth, window.screen.availHeight);console.log("w={},h={}", $(window).width(), $(window).height());console.log("w={},h={}", $(document).width(), $(document).height());console.log("w={},h={}", $(document.body).width(), $(document.body).height());
});
</script>
<style type="text/css">
*{margin:0;}
.item{width: 100%;height: 300px;padding: 100px 0 0 100px;
}
.item:nth-of-type(even){background: #abc;color: #fff;
}
.item:nth-of-type(odd){background: #fff;color: #333;
}
.rightFlatBar {position: fixed;right: 5px;bottom: 0px;width: 60px;height: auto;
}
.rightFlatBar span{display: block;width: 60px;height: 60px;margin-bottom: 5px;border: 1px solid #ececec;border-radius: 5px;transition: .3s;box-shadow: 0px 0px 3px rgba(0,0,0,0.08);text-align:center;line-height: 60px;background: #fff;cursor:hand;
}
</style>
</header><body><div><div class="item"><h1>条目1</h1></div><div class="item"><h1>条目2</h1></div><div class="item"><h1>条目3</h1></div><div class="item"><h1>条目4</h1></div><div class="item"><h1>条目5</h1></div></div><div class="rightFlatBar"><span>顶部</span><span>条目1</span><span>条目2</span><span>条目3</span><span>条目4</span><span>条目5</span></div>
</body>
</html>

运行效果：

jQuery 判断元素是否在屏幕可见区域内相关推荐

jQuery 判断元素是否存在
前言 jQuery v3.5.1 jQuery 查找元素比如查找某个input元素$("input[name='email']"). 示例: <html> <h ...
html点击显示隐藏判断,jquery判断元素是否隐藏的多种方法
第一种:使用CSS属性 var display =$('#id').css('display'); if(display == 'none'){ alert("被你发现了,我是隐藏的啦!&q ...
jquery判断元素是否隐藏的多种方法
第一种:使用CSS属性复制代码代码如下: var display =$('#id').css('display'); if(display == 'none'){ alert("被 ...
html if 隐藏元素,jquery判断元素是否隐藏？
这篇文章主要介绍了jquery判断元素是否隐藏的多种方法,需要的朋友可以参考下. jquery判断元素是否隐藏? 1.首先获取需要判断的元素var node = $('#id'); 2.然后使用jqu ...
java判断地图范围_百度地图java 判断当前位置是否在多边形区域内
package com.haiyisoft.cAssistant.adapter.hessian; import java.awt.geom.Point2D; import java.util.Arr ...
地图处理方法-判断一个点是否在某个区域内
判断一个点是否在某个区域内(多边形) 背景: 比如滴滴会根据乘客所在的不同区域,给出不同的价格.市区堵一点,那么价格也高点.获取服务范围只规定在某个范围内原理: 求解从该点向右发出的水平线射线与多边 ...
判断一个点是否在某个区域内(多边形)
判断一个点是否在某个区域内(多边形) 背景: 比如滴滴会根据乘客所在的不同区域,给出不同的价格.市区堵一点,那么价格也高点.获取服务范围只规定在某个范围内原理: 求解从该点向右发出的水平线射线与多边 ...
JAVA判断一个地理坐标是否在一个多边形区域内和是否在一个圆形区域内(经纬度)
怎么样判断一个坐标点在一个多边形区域内?包括规则多边形,不规则多边形,还有圆... 1 判断一个坐标是否在圆形区域内? 多边形和圆分开写,首先简单的就是判断是否在圆里面,如何判断一个坐标是否在圆形区域 ...
Jquery判断元素是否隐藏：display属性状态值
很多时候,我们都要判断元素当前是否处于显示或隐藏状态.Jquery通过判断元素display属性状态值来实现"判断当前操作元素是否显示还是隐藏",实现方法主要使用Jquery提供的 ...

jQuery 判断元素是否在屏幕可见区域内

前言

判断元素是否在网页可见区域内

判断元素是否在人眼可见区域内

isOnVisibleScreen 示例

参考

可见区域示例

jQuery 判断元素是否在屏幕可见区域内相关推荐

最新文章

热门文章