Question

有没有办法检查两个元素的位置？例如：

.bigBox {
  width: 100%;
  height: 200px;
}

.btn {
  position: fixed
  display: none;
  top: 10px;
  right: 0;
}

整个网站都有一个大盒子。我有一个定位固定的按钮，没有显示。如果fadeIn()

下的按钮为100px，则该按钮应为.bigBox.

Answer 1

首先，.bigBox尺寸的位置：

var bottomBigBox = $(".bigBox").offset().top + $(".bigBox").height();
var topOfBtn = $(".btn").offset().top;

// Check the condition and fade it.
if (bottomBigBox + 100 == topOfBtn)
  $(".btn").fadeIn();

Answer 2

您可以使用position()或offset()方法分别知道元素相对于父元素或相对于文档的位置。

 $('.element').position().top; // returns the top value relative to parent
 $('.element').position().left; // returns the left value relative to parent

 $('.element').offset().top; // returns the top value relative to document
 $('.element').offset().left; // returns the left value relative to document

查看更多：

http://api.jquery.com/offset/

https://api.jquery.com/position/

Answer 3

您可以使用offset()获取元素位置。然后，您可以按100对其计算的.height()和所需的边距求和：

var bb = $(".bigBox");
var o = bb.offset();
var h = bb.height();

$(".btn").css("top", o.top + h + 100).fadeIn();

Working demo

为什么要使用height()？它将获得元素计算高度，因此如果您更改CSS或甚至使用相对值，它将起作用。

使用普通Javascript

var bb = document.querySelector(".bigBox");
var t = bb.offsetTop;
var h = bb.offsetHeight;

document.querySelector(".btn").style.top = t + h + 100 + "px";

$(".btn").fadeIn(); // jQuery only for fadeIn effect

Working demo

检查两个元素的位置

3 个答案: