检测固定位置的div何时越过另一个元素

Question

我正在努力寻找如何检测固定位置的div何时开始和结束以在滚动时将鼠标悬停在某个div上。

我的div始终固定在窗口的中心位置。当我滚动页面时，我希望固定div在开始悬停时会更改另一个颜色，并在完成悬停后将其删除。我附上了一个小图来说明我的问题。恢复：

页面加载时固定的div具有黑色->开始悬停第二个div，颜色变为白色->完成以悬停第二个div，颜色恢复为黑色。

我发现了这个问题：检测职位：固定；元素越过另一个元素

当div开始越过第二个时，它会起作用，但是当悬停完成时，它不会重置颜色。我的代码：

$(window).scroll(function() {
  if ($('div.fixed').offset().top < ($(".div-to-cross").offset().top - 0)) {
    $('div.fixed').removeClass('white');
  } else {
    $('div.fixed').addClass('white');
  }
});

在此先感谢您的帮助。

看图

Answer 1

您必须考虑div高度。

需要计算两个“时刻”，即进入和离开。

因此，当固定div的底部进入滚动的div的顶部时...
并且当滚动的div 的底部离开固定的div的顶部时。

这是一个运行示例：

$(window).scroll(function(){
  var fixed = $("div.fixed");
  
  var fixed_position = $("div.fixed").offset().top;
  var fixed_height = $("div.fixed").height();

  var toCross_position = $(".div-to-cross").offset().top;
  var toCross_height = $(".div-to-cross").height();

  if (fixed_position + fixed_height  < toCross_position) {
    fixed.removeClass('white');
  } else if (fixed_position > toCross_position + toCross_height) {
    fixed.removeClass('white');
  } else {
    fixed.addClass('white');
  }

});

.fixed{
  position:fixed;
  top:calc(50% - 50px);
  left:0;
  background-color:black;
  height:100px;
  width:100%;
}
.white{
  background-color:white;
}
.div-to-cross{
  height:100px;
  background-color:blue;
}

/* just for this demo */
.spacer{
  height:400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="fixed"></div>
<div class="spacer"></div>
<div class="div-to-cross"></div>
<div class="spacer"></div>