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

Question

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

我有一个 div 始终固定在我的 window 中心位置。当我滚动我的页面时，我希望固定 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

Answer 1

您必须考虑 div 高度。

有两个"moments"要计算，进入和离开。

所以当固定 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-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');
    }
});

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

Detect when a div with fixed position crosses over another element

html

jquery

element

fixed

detect