Question

有什么方法可以检测两个元素的重叠点？

例如，请参考以下我使用的代码。

ZonedDateTime utc = ...

ZonedDateTime est = utc.withZoneSameInstant(ZoneId.of("America/New_York"));

ZonedDateTime estInSameDay = ZonedDateTime.of(utc.toLocalDate(), est.toLocalTime(), ZoneId.of("America/New_York"));

非常简单的代码。仅有两个<html> <head> <style> body { height: 100%; margin: 0; padding: 0; } .s1, .s2 { height: 100%; } .s1 { display: flex; justify-content: center; align-items: center; } .s2 { background-color: aquamarine; } .s1 p { position: fixed; } </style> </head> <body> <div class="s1"> <p class="p">TEST</p> </div> <div class="s2"> </div> </body> </html>和一个<div>标签。

我将<p>设置为position: fixed标签，因为它始终位于屏幕的中心。

所以，现在这就是我要做的事情。

有什么方法可以检测到<p>和<p>的交汇点吗？

当.s2与<p>相遇时，我想更改其颜色。

（我是说这一点）

这里有解决方案吗？

我想用纯html / css / js制作。但是有没有相关的库，没关系。

谢谢。

Answer 1

您可以使用Event Listeners进行此操作。

window.onload = function() {  
  let p = document.querySelector('.s1 p');
  let s2 = document.querySelector('.s2');

  window.addEventListener('scroll', () => {
    let coordP = p.getBoundingClientRect();
    let coordS2 = s2.getBoundingClientRect();

    if(coordP.bottom > coordS2.top) {
      p.style.color = 'yellow';
    }
    else p.style.color = 'black';
  });
}

<html>
<head>
  <style>
    body {
      height: 100vh;
      margin: 0;
      padding: 0;
    }
    .s1, .s2 {
      height: 100vh;
    }
    .s1 {
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid green;
    }
    .s2 {
      background-color: aqua;
      border: 1px solid aqua;
    }
    .s1 p {
      position: fixed;
    }
  </style>
</head>
<body>
  <div class="s1">
    <p class="p">TEST</p>
  </div>
  <div class="s2">

  </div>
</body>
</html>

检测两个元素的重叠点

1 个答案: