如何在滚动时使用JavaScript检测特定的CSS类？

我的WordPress网站上有一个固定的侧栏导航菜单。导航菜单包含自定义图标。一组图标的颜色为黑色和金色，另一组相同的图标的颜色为金色和白色

根据网站的要求，我不得不同时使用这两套图标，因为我在一些页面的页眉、页脚和内容部分都有黑色的图像，这些图标的金色和黑色很难观察到。出于这个原因，我想使用另一组图标，即白色和金色，以便用户可以轻松地在这些深色图像上观察它们

我可以用JavaScript编写代码来计算有暗图像的部分。然后，我可以在图标之间切换，即使用白色和金色图标，而不是黑色和金色图标。但是，这不是必需的方法，因为我的网站上大约有8个页面具有相同的页眉和页脚，但每个页面都有不同的内容，并且这些黑色图像显示在每个页面的不同位置

到目前为止，我使用了以下代码，这有助于我计算截面高度

$(window).scroll(function() {
   var element1height = $( "#element1" ).height(); 
   var element2height = $( "#element2" ).height();
   var total = element1height + element2height;
   var st = $(this).scrollTop();
   if( st > element1height ) {
   $("nav").addClass("active"); 
   } 
   else {
   $("nav").removeClass("active"); 
   }
   if( st > total ) {
   $("nav").removeClass("active"); 
   } 
  });

我需要一些JavaScript CSS类检测方面的帮助，这样我可以在图标集之间切换，并在检测到所需的CSS类时使用白色和金色图标，即检测到我使用图像的块的CSS类时。一旦我检测到这个类，我就可以用JavaScript编写代码，只在这些图像上使用我的图标的白色和金色集

---

任何帮助都将不胜感激。

所以这主要是理论，但以下是我将如何攻击它。。。 标记所有黑暗区域，如class

black

，然后在每个

black

类中循环

$（“.black”）。每个（函数（索引）{
控制台日志（“发现黑暗区域”）；
});

找到它离顶端的距离

var start=$（this）.offset（）.top

而且是高度。它给你它的开始和结束

var end=start+$（this）.height（）

然后找到图标的起始位置和高度。那就检查一下

if（iconStart>start&&iconEnd}
通过查看此处的代码，您可以看到一个示例：或者只需使用此插件即可。我已经使用过多次，效果非常好