检测具有固定位置的 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的顶部时......
当滚动的底部离开固定的顶部时。

下面是要运行的示例：

$(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>

Answer 2

谢谢。我对其进行了一点修改，使其适用于多个div 到交叉元素。当它与白色背景的div 重叠时，我正在使用它来更改我的固定白色汉堡菜单。然后它得到另一种颜色，直到它离开白色背景div。

//Burger Scroll Change Color
$(window).scroll(function(){
    var fixed = $("div.fixed");
    var fixed_position = $("div.fixed").offset().top;
    var fixed_height = $("div.fixed").height();
    var addClass = false;
    $('.div-to-cross').each(function(){
        var toCross_position = $(this).offset().top;
        var toCross_height = $(this).height();
        if (fixed_position + fixed_height  < toCross_position) {
            //fixed.removeClass('white');
        } else if (fixed_position > toCross_position + toCross_height) {
            //fixed.removeClass('white');
        } else {
            addClass = true;
        }
    });
    if(addClass == true){
        fixed.addClass('change-color');
    }else{
        fixed.removeClass('change-color');
    }
});