我如何使用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>

10-05 20:58
查看更多