Javascript 根据下方的div更改粘性导航颜色'；s颜色

基本上在我的网站上，我有一个透明背景的粘性导航。下面我有浅色或深色的内容div

我试图实现的是，当您滚动时，javascript函数会根据div的类名（或数据属性，以两者为准）主动确定粘滞nav是否位于浅色或深色内容div之上，并更改粘滞nav中文本的颜色，使其在内容div上可见

目前我没有启动任何javascript，因为我不知道如何检测一个div是否超过另一个div。但是正如你所看到的，一旦粘性导航在一个深色的内容分区上，我需要将字体颜色更改为较浅的颜色，一旦它回到一个浅色的内容分区上，我需要将颜色更改为较深的颜色

HTML示例：

<div id="sticky">Menu</div>
<div class="content light"></div>
<div class="content dark"></div>
<div class="content light"></div>
<div class="content dark"></div>
<div class="content light"></div>

菜单

提前谢谢

小提琴演奏：

var stickyOffset=$（“#sticky”）.offset（）；
var$contentDivs=$（“.content”）；
$（文档）。滚动（函数（）{
$contentDivs.每个（函数（k）{
var_thiscoffset=$（this.offset（）；
var\u actPosition=\u thiscaffset.top-$（window.scrollTop（）；
如果（_actPosition0）{
$（“#current”）.html（“sticky下的当前div是：”+$（this.attr（“class”）））；
$（“#sticky”）.removeClass（“light-dark”）.addClass（$（this.hasClass（“light”）？“light”：“dark”）；
返回false；
}
});
});
菜单

卡布亚，各位。 我为你找到了这个：

尝试添加这个

$（窗口）。滚动（函数（）{
/*获取窗口中的当前滚动位置*/
var scroll=$（窗口）.scrollTop（）；
$（'.mainleet li'）。每个（函数（）{
/*获取导航元素的位置（从顶部到顶部的距离减去其高度的一半，以便在一半在黑色背景上，一半在白色背景上时更改颜色）*/
var elementPositionTop=parseFloat（$（this.offset（）.top）+（parseFloat（$（this.height（）/2））；
/*更改每个背景更改的颜色*/
如果（elementPositionTop>=320&&elementPositionTop=960&&elementPositionTop这可能是有用的：这是有效的！但有一个问题，只有当导航正好覆盖1/2时，才有办法更改类，使其正好在文本的中心更改？更新的小提琴：这就是我在粘性导航的中心更改类的方法，如果有兴趣的人：@Corey，你能举一个例子说明有两种以上不同背景颜色的情况吗？比如说黑色、白色、绿色、蓝色背景，导航栏的颜色对于每种特定的背景颜色也有不同的颜色吗？比如说白色、黑色、黄色、粉色。这会非常有用！似乎没有为
top:50%
工作，有人找到了解决方案吗？
var stickyOffset = $("#sticky").offset();
var $contentDivs = $(".content");
$(document).scroll(function() {
    $contentDivs.each(function(k) {
        var _thisOffset = $(this).offset();
        var _actPosition = _thisOffset.top - $(window).scrollTop();
        if (_actPosition < stickyOffset.top && _actPosition + $(this).height() > 0) {
            $("#current").html("Current div under sticky is: " + $(this).attr("class"));
            $("#sticky").removeClass("light dark").addClass($(this).hasClass("light") ? "light" : "dark");
            return false;
        }
    });
});

<div>
    <div id="sticky">Menu <span id="current"></span></div>
    <div class="content light"></div>
    <div class="content dark"></div>
    <div class="content light"></div>
    <div class="content dark"></div>
    <div class="content light"></div>
</div>