我如何使用Jquery检测元素(位置绝对)是否在视口之外,并将其设置为left:0(以使该元素适合视口),当body发生溢出:隐藏属性时。
这是我的标记。
<!DOCTYPE html>
<html>
<head>
<style>
body,html{overflow: hidden;}
div{
position: absolute; width: 100%; margin-left: 30%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
最佳答案
您需要在jQuery中执行以下比较:
var window_width = $(window).width();
var offset_left = $("div").offset().left;
var offset_right = $("div").offset().left + $("div").width();
var scroll_left;
var sum;
$("button").click(function(){
scroll_left = $(window).scrollLeft();
sum = window_width + scroll_left;
if(sum >= offset_left && scroll_left <= offset_right)
alert("visible");
else
alert("not visible");
});
div{
position: absolute;
width: 100%;
margin-left: 120%;
background:yellow;
height:200px;
}
button{
position:fixed;
top:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
</div>
<button>Check</button>