如何更改滚动条上透明标题的文本颜色，具体取决于重叠的div

如何解决如何更改滚动条上透明标题的文本颜色，具体取决于重叠的div

我有一个带有透明backgrounsd的标题，并且我试图获取标题文本以根据重叠的div的背景在白色和黑色之间更改颜色。

到目前为止，我已经设法将.color-menu类添加到所有我希望标题为黑色的div中。

然后，当.dark-menu div到达页面顶部时，我将其添加到标题的.color-menu类。

问题在于它仅适用于第一个.colour-menu div。当它位于视口中时，它将变为黑色，下一个div将变回白色，但是当下一个.color-menu div到达顶部时，它将保持不变。

因此，似乎.each函数无法正常工作，但我不确定如何解决此问题。

$(window).scroll(function() {
 $('.color-menu').each(function(i){
  var top_of_element = $(".color-menu").offset().top;
  var bottom_of_element = $(".color-menu").offset().top + $(".color-menu").outerHeight();
  var top_of_screen = $(window).scrollTop();

  if ((top_of_screen > top_of_element) && (top_of_screen < bottom_of_element)) {
    $(".header").addClass("dark-menu");
  } else {
    $(".header").removeClass("dark-menu");
  }
 });
});

更新：我也尝试过使用$（this），但是当它改变颜色时它确实会抛出。

$(window).scroll(function() {
 $('.color-menu').each(function(i){
  var top_of_element = $(this).offset().top;
  var bottom_of_element = $(this).offset().top + $(this).outerHeight();
  var top_of_screen = $(window).scrollTop();

  if ((top_of_screen > top_of_element) && (top_of_screen < bottom_of_element)) {
    $(".header").addClass("dark-menu");
  } else {
    $(".header").removeClass("dark-menu");
  }
});
});

以下是我的代码的简化版本：

$(document).ready(function() {
  $(".white").addClass("color-menu");
  $(".white-bold").addClass("color-menu");
  $(".light").addClass("color-menu");
  $(".light-bold").addClass("color-menu");
  $(".bright").addClass("color-menu");
});

$(window).scroll(function() {
  $('.color-menu').each(function(i){
    var top_of_element = $(".color-menu").offset().top;
    var bottom_of_element = $(".color-menu").offset().top + $(".color-menu").outerHeight();
    var top_of_screen = $(window).scrollTop();

    if ((top_of_screen > top_of_element) && (top_of_screen < bottom_of_element)) {
      $(".header").addClass("dark-menu");
    } else {
      $(".header").removeClass("dark-menu");
    }
  });
});

.header {
  width: 100%;
  background: rgba(0,0);
  margin: 0;
  padding:10px;
  position: fixed;
  text-align: center;
}
.header a {
  color: white;
  font-size: 2rem;
  text-transform: uppercase;
}
.dark-menu a{
  color: black;
}
.black {
  background-color: black;
  height: 200px;
}
.white,.white-bold,.light,.light-bold,.bright {
  background-color: white;
  height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
  <a>This is the header</a>
</div>
<div class ="black"></div>
<div class ="white"></div>
<div class ="black"></div>
<div class ="white-bold"></div>
<div class ="black"></div>
<div class ="light"></div>
<div class ="black"></div>
<div class ="light-bold"></div>
<div class ="black"></div>
<div class ="bright"></div>

解决方法

您的代码中发生的事情是，在滚动状态下，您遍历每个color-menu div并添加该类（如果它是当前类）...，然后代码 continues 继续循环遍历数组中的剩余元素，然后再次删除它，因为该页面不在另一个div中。

在示例之后，我已逐步说明了使此功能生效所需的更改，但是首先您可以在此处看到它的工作：

工作示例：

$(document).ready(function() {
  $(".white").addClass("color-menu");
  $(".white-bold").addClass("color-menu");
  $(".light").addClass("color-menu");
  $(".light-bold").addClass("color-menu");
  $(".bright").addClass("color-menu");

  $(window).scroll(function() {

    var inColorMenu = false;            /* initialise var to store if we are in color-menu */
    var top_of_screen = $(window).scrollTop();          /* just get this once outside loop */

    /* Loop through each color-menu element and check if we are in one */
    $('.color-menu').each(function(i) {
      var top_of_element = $(this).offset().top;
      var bottom_of_element = top_of_element + $(this).outerHeight();

      /* if we are in a color-menu element,set our var to true and stop processing */
      if ((top_of_screen > top_of_element) && (top_of_screen < bottom_of_element)) {
        inColorMenu = true;
        return false;         /* N.B. need to return "false" to break from the "each" loop */
      }
    });

    if (inColorMenu) {
      $(".header").addClass("dark-menu");
    } else {
      $(".header").removeClass("dark-menu");
    }
  });
});

.header {
  width: 100%;
  background: rgba(0,0);
  margin: 0;
  padding: 10px;
  position: fixed;
  text-align: center;
}

.header a {
  color: white;
  font-size: 2rem;
  text-transform: uppercase;
}

.header.dark-menu a {
  color: black;
}

.black {
  background-color: black;
  height: 200px;
}

.white,.white-bold,.light,.light-bold,.bright {
  background-color: white;
  height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
  <a>This is the header</a>
</div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white-bold"></div>
<div class="black"></div>
<div class="light"></div>
<div class="black"></div>
<div class="light-bold"></div>
<div class="black"></div>
<div class="bright"></div>

工作原理：

声明一个变量以记录我们是否在“颜色菜单”类中，并将其初始化为false，例如：

var inColorMenu = false;

在遍历$('.color-menu').each时，如果我们位于div之一的顶部和底部之间（您的代码已在检测其中），则将我们的变量设置为true即可进行记录。
我们还可以返回false来中断each循环并停止处理其余元素（如果没有这个，它仍然可以工作，我们只是减少了所需的处理量）：

if ((top_of_screen > top_of_element) && (top_of_screen < bottom_of_element)) {
    inColorMenu = true;
    return false;         /* N.B. need to return "false" to break from the "each" loop */
}

最后，在完成$('.color-menu').each循环后，如果inColorMenu为true，我们知道我们在color-menu div中，因此将dark-menu类添加到标题中，否则我们将其删除：

if (inColorMenu) {
    $(".header").addClass("dark-menu");
} else {
    $(".header").removeClass("dark-menu");
}

注意：获取$(this)和offset().top时需要使用outerHeight()，以便在循环中获取 current 元素的值。 $(".color-menu")使用此类获取未指定元素的值，因此将不起作用。