Javascript 超过某些div时更改固定导航文本颜色

如果这是一个重复的问题，请道歉。我已经浏览了互联网，但还没有找到一个可行的解决方案。我的网站有不同的背景颜色，蓝色和白色。我的导航副本主要设置为白色，但我希望它在有白色背景的div上时变为黑色

最初，我在这里发现了一些JS：

$(document).ready(function(){
     $(window).scroll(function(){
     var lightPos = $('#light').offset().top;
     var lightHeight = $('#light').height();
     var menuPos = $('.desktop-menu').offset().top;
     var menuHeight = $('.desktop-menu').height();
     var menuPos = $('.logo').offset().top;
     var menuHeight = $('.logo').height();
     var scroll = $(window).scrollTop();

     if(menuPos > lightPos && menuPos < (lightPos + lightHeight)) {
         $('.desktop-menu').addClass('menu-secondary');
         $('.desktop-menu').removeClass('menu-primary');
     }

     else {
         $('.desktop-menu').removeClass('menu-secondary');
         $('.desktop-menu').addClass('menu-primary');
     }  
     })
})

示例JS：

$(document).ready(function(){
   $(window).scroll(function(){
   var lightPos = $('#light').offset().top;
   var lightHeight = $('#light').height();
   var menuPos = $('.menu-btn').offset().top;
   var menuHeight = $('.menu-btn').height();
   var scroll = $(window).scrollTop();

   if(menuPos > lightPos && menuPos < (lightPos + lightHeight)) {
      $('.menu-btn').addClass('dark-color');
      $('.menu-btn').removeClass('light-color');
   }

   else {
      $('.menu-btn').removeClass('dark-color');
      $('.menu-btn').addClass('light-color');
   }
   })
})

$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
var lightPos=$（'#light'）.offset（）.top；
var lightHeight=$（“#light”）.height（）；
var menuPos=$（'.menu btn'）.offset（）.top；
var menuHeight=$（'.menu btn'）.height（）；
var scroll=$（窗口）.scrollTop（）；
if（menuPos>lightPos&&menuPos<（lightPos+lightHeight））{
$（'.menu btn'）.addClass（'深色'）；
$（'.menu btn'）.removeClass（'浅色'）；
}
否则{
$（'.menu btn'）.removeClass（'深色'）；
$（'.menu btn'）.addClass（'light-color'）；
}
})
})

好的，我不得不对你的代码做一些修改，因为你在检查ID（你不应该有多个元素具有相同的ID）

这应该适合你的情况， 所以基本上我创建了一个灯光区域数组，然后检查滚动位置是否在其中一个区域内

var$=jQuery；
$（文档）.ready（函数（）{
var-lightPos=[]；
$（“.light background”）。每个（函数（）{
轻推({
开始：$（this）.offset（）.top，
结束：$（this.offset（）.top+$（this.height（））
});
});
$（窗口）。滚动（函数（）{
var menuPos=$（“.menu btn”）.offset（）.top；
变量isInLight=！！lightPos.some（（灯光）=>{
返回light.startmenuPos；
});
如果（isInLight）{
$（“.menu btn”）.addClass（“深色”）；
$（“.menu btn”）.removeClass（“浅色”）；
}否则{
$（“.menu btn”）.removeClass（“深色”）；
$（“.menu btn”）.addClass（“浅色”）；
}
});
});
正文{
保证金：0；
字体系列：“罂粟花”，无衬线；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
}
标题{
显示器：flex；
}
.集装箱{
文本对齐：居中；
}
/*--------------------颜色*/
.暗背景{
背景：313747；
}
.浅色背景{
背景#f4；
}
.深色{
颜色：303030；
}
.浅色{
颜色：#F4；
}
/*--------------------航行*/
导航{
位置：固定；
高度：自动；
宽度：100%；
保证金：自动；
z指数：10；
}
.菜单{
显示器：flex；
填充：2em 0 2em 3em；
文本对齐：左对齐；
浮动：左；
}
.菜单李a{
右边距：2米；
字体大小：1.2米；
字号：700；
文字装饰：无；
}
/*--------------------英雄容器*/
.英雄容器{
位置：相对位置；
高度：100vh；
宽度：100%；
}
/*--------------------内容容器*/
.内容容器{
位置：相对位置；
显示器：flex；
宽度：100%；
高度：100vh；
保证金：自动；
}






你能添加一个代码笔来复制你的案例吗？代码笔对我来说太慢了，所以我用示例代码更新了我的问题。太棒了，谢谢你，Giovanni！我仍然在思考JS，所以这是一个巨大的帮助！：）需要进行哪些调整才能引入第三个选项？您可以为新部分添加一个新类，例如pink background，然后循环遍历所有“.pink background”元素并创建一个新数组（pinkPos），就像我对灯光部分所做的那样，使用“isInPink”功能检查您是否处于粉红色区域，然后相应地播放菜单类
body {
   margin: 0;
   font-family: 'Poppins', sans-serif;
}
ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
}
header {
   display: flex;
}
.container {
   text-align: center;
}

/*-------------------- COLORS */
.dark-background {
   background: #313747;
}
.light-background {
   background: #f4f4f4;
}
.dark-color {
   color: #303030;
}
.light-color {
   color: #f4f4f4;
}

/*-------------------- NAVIGATION */
nav {
   position: fixed;
   height: auto;
   width: 100%;
   margin: auto;
   z-index: 10;
}
.menu {
   display: flex;
   padding: 2em 0 2em 3em;
   text-align: left;
   float: left;
}
.menu li a {
   margin-right: 2em;
   font-size: 1.2em;
   font-weight: 700;
   text-decoration: none;
}

/*-------------------- HERO CONTAINER */
.hero-container {
   position: relative;
   height: 100vh;
   width: 100%;
}

/*-------------------- CONTENT CONTAINER */
.content-container {
   position: relative;
   display: flex;
   width: 100%;
   height: 100vh;
   margin: auto;
}

$(document).ready(function(){
   $(window).scroll(function(){
   var lightPos = $('#light').offset().top;
   var lightHeight = $('#light').height();
   var menuPos = $('.menu-btn').offset().top;
   var menuHeight = $('.menu-btn').height();
   var scroll = $(window).scrollTop();

   if(menuPos > lightPos && menuPos < (lightPos + lightHeight)) {
      $('.menu-btn').addClass('dark-color');
      $('.menu-btn').removeClass('light-color');
   }

   else {
      $('.menu-btn').removeClass('dark-color');
      $('.menu-btn').addClass('light-color');
   }
   })
})