超过特定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的ID是什么（#light或#dark），在页面上的前3个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');
   }
   })
})

解决方法

好吧，我不得不更改一下代码，因为您正在检查ID（您不应有多个具有相同ID的元素）

您的情况应该可以， 所以基本上我创建了一个亮区数组，然后检查滚动位置是否在其中之一内

var $ = jQuery;
$(document).ready(function () {
  var lightPos = [];
  $(".light-background").each(function () {
    lightPos.push({
      start: $(this).offset().top,end: $(this).offset().top + $(this).height()
    });
  });
  $(window).scroll(function () {
    var menuPos = $(".menu-btn").offset().top;
    var isInLight = !!lightPos.some((light) => {
      return light.start < menuPos && light.end > menuPos;
    });

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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"></div>

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

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

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

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

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