当固定位置的div跨越另一个元素时检测

Question

我很努力地找出如何检测固定位置的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

Answer 1

你必须采取的股利高度帐户。

有两个“时刻”来计算，进入和离开。

因此，当固定格的底部进入滚动的顶部...
而当滚动的底部离开固定的顶部。

这里是运行一个例子：

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