检测具有固定位置的 div 何时跨越另一个元素答案

【问题标题】：Detect when a div with fixed position crosses over another element检测具有固定位置的 div 何时跨越另一个元素
【发布时间】：2017-06-15 16:26:35
【问题描述】：

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

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

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

我发现了这个问题：Detect when a position: fixed; element crosses over another element

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

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

提前感谢您的帮助。

View image

【问题讨论】：

标签： jquery html element fixed detect

【解决方案1】：

您必须考虑到 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>

【讨论】：

非常感谢，它就像一个魅力！但是，我在网站上的页面不需要切换颜色的技巧，因为固定的 div 没有此部分可以交叉，它会使我的 javascript 的其余部分崩溃。你知道我们该如何解决这个冲突吗？
我想我找到了解决方案，我将整个函数包含在 IF 语句中：if ($('.div-to-cross').length) { Do something }
是的...就是这样。当然如果没有div-to-cross 元素......这可能是有问题的。您的 IF 语句应该有效。

【解决方案2】：

谢谢。我对其进行了一些修改，使其适用于多个 div-to-cross 元素。当它与白色背景的 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');
    }
});

【讨论】：