在這個例子中，顯然我的div與頁面底部相交，我如何從javascript中知道這個元素是否與它相交？

如果比如:bottom:0px；不應該相交

.fixed{
  position:fixed;
  bottom:-10px;
  left:0px;
  width:300px;
  height:300px;
  background:blue;
  border:3px solid red;
}

<div class="fixed"></div>

可以使用getBoundingClientRect()函數。它提供有關元素大小及其相對于視口的位置的信息。

然后將它轉換到window.innerHeight，你就可以知道它是否與屏幕相交。

var elmBottom = document.querySelector(".fixed").getBoundingClientRect().bottom;

if(elmBottom > window.innerHeight) console.log("elm intersects the bottom");
else console.log("elm still fully in view");

.fixed{
  position:fixed;
  bottom:-10px;
  left:0px;
  width:300px;
  height:300px;
  background:blue;
  border:3px solid red;
}

<div class="fixed"></div>

我參考了本教程，其中的代碼檢查元素是否在視口中。

代碼的工作方式是使用getBoundingClientRect()檢查元素的位置，并使用documentElement.clientHeight檢查視口的高度。

在您的例子中，因為您只想檢查底部邊框是否重疊，所以我修改了代碼，以便只檢查domRect.bottom。

最后這個方法會顯示bottom:0px；如相交，和底:1px不相交。要底的話:0px若要相交，請將documentElement.clientHeight加1

function isIntersectingBottom(ele) {
    const domRect = ele.getBoundingClientRect();
    console.log(domRect.bottom);
    console.log(document.documentElement.clientHeight);
    return (
      domRect.bottom >= document.documentElement.clientHeight + 1
    );
  }
  
  const ele = document.querySelector('.fixed');
  console.log(isIntersectingBottom(ele));

.fixed{
  position:fixed;
  bottom:-10px;
  left:0px;
  width:300px;
  height:300px;
  background:blue;
  border:3px solid red;
}

<div class="fixed"></div>