如何根据滚动到 WordPress 顶部的部分更改标题元素的颜色？

Question

我有一个简约的透明标题，左侧只有汉堡包，中间是徽标。汉堡包图标和徽标包含透明度，因此我的意图是让它们在下面的内容为浅色时为黑色，在下面的内容为深色时为白色。 （我正在使用适合 CSS 样式的 SVG）。

使用 jQuery，我正在处理的逻辑是收集所有适当分类的部分，并在滚动时向后循环检查 section.top 值是否低于 scrollTop() 值。如果是这样，因为我们要倒退，这是当前位于标题下的部分，因此将一个类应用/删除到标题以控制标题元素的颜色，然后停止浏览这些部分，因为我们不想要任何其他部分再次更改颜色。

我想出的代码是……

jQuery(function($) {

  var $sections = $('.content_section').get().reverse();
  if ($sections.length > 0) {      

    $(window).scroll(function() {
      var scrollPos = $(this).scrollTop();

      $sections.each(function() { 
        var sectionPos = $(this).offset();        

        if ( scrollPos >= sectionPos.top() ) {
        
          if ($(this).hasClass("dark_section")) {
            $('header').addClass('dark_section_below');
          } else {
            $('header').removeClass('dark_section_below');
          }
          
          return false;

        }
      });
    });
  }
});

但是控制台告诉我$sections.each is not a function。在代码进入 .scroll() 函数之前，$sections 是一个 jQuery 对象并且 $sections.each() 可以正常工作。显然我在这里遇到了范围或其他问题，但我认为我的 $sections 将是全球性的？

非常感谢您能给我解决此问题的任何帮助。如果您有不同/更好的方法来实现我在这里想要实现的目标，我也很乐意看到。

Answer 1

var $sections = $('.content_section').get().reverse();

这将返回 JavaScript 数组，因此您需要将其包裹在 jQuery 函数 $() 上以对其使用 jQuery each 方法，然后它会正常迭代。

$($sections).each(function() {

jQuery(function($) {

  var $sections = $('.content_section').get().reverse();
  if ($sections.length > 0) {      

    $(window).scroll(function() {
      var scrollPos = $(this).scrollTop();

      $($sections).each(function() { 
        var sectionPos = $(this).offset();        

        if ( scrollPos >= sectionPos.top() ) {
        
          if ($(this).hasClass("dark_section")) {
            $('header').addClass('dark_section_below');
          } else {
            $('header').removeClass('dark_section_below');
          }
          
          return false;

        }
      });
    });
  }
});

参考链接：

JQuery .each() backwards