Изменить фиксированный цвет текста навигации при работе с определенными элементами 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');
     }  
     })
})

Но это, похоже, не работает за пределами 3 контейнеров. Если я продолжу прокрутку к другим элементам div, независимо от того, какой идентификатор я прикреплю к элементу div (#light или #dark), текст перестанет меняться после первых трех контейнеров div на странице.

Спасибо всем, кто может помочь!

РЕДАКТИРОВАТЬ: изо всех сил пытался заставить codepen работать, поэтому вот пример ниже.

Пример HTML:

<div class="container">
   <header>
      <nav>
         <ul class="menu">
            <li><a href="#" class="menu-btn light-color">Page 1</a></li>
            <li><a href="#" class="menu-btn light-color">Page 2</a></li>
            <li><a href="#" class="menu-btn light-color">Page 3</a></li>
         </ul>
      </nav>
   </header>

   <div class="hero-container dark-background">
   </div>

   <div class="content-container light-background" id="light">
   </div>
   
   <div class="content-container dark-background">
   </div>

   <div class="content-container light-background" id="light">
   </div>

   <div class="content-container dark-background">
   </div>
   
   <div class="content-container light-background" id="light">
   </div>

   <div class="content-container dark-background">
   </div>
</div>

Пример CSS:

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;
}

Пример 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');
   }
   })
})