jQuery-滚动到section.drk时更改徽标的颜色

当滚动到section.drk时，会更改徽标的颜色，但仅在第一个section.drk中更改，其余部分不会更改。有人能帮忙吗

这是我在jQuery中的代码

$.hdchng = function () {
  var hubchng = $('.drk');
  var distance = hubchng.offset().top;
    $window = $(window);

  $window.scroll(function () {
    if ($window.scrollTop() >= distance) {
      $('.part1').addClass('darkmode');
      $('.part2,part4').addClass('greymode');
      $('.mngNv').addClass('menudrk');
    } else {
      $('.part1').removeClass('darkmode');
      $('.part2,part4').removeClass('greymode');
      $('.mngNv').removeClass('menudrk');
    }
  });
};
$.hdchng();

和html：

<section class="MNGwb drk"> <- it works here
</section>
<section class="MNGex"> <- it works here
</section>
<section class="MNGwb drk"> <- it doesn't work here
</section>

---

由于您没有包含整个HTML，我添加了几个div和一些CSS只是为了演示。你的代码基本上是有效的。您只需要将点添加到
.part4
的选择器中


$.hdchng=函数（）{
var hubchng=$（'.drk'）；
var distance=hubchng.offset（）.top；
$window=$（window）；
$window.scroll（函数（）{
如果（$window.scrollTop（）>=距离）{
$（'.part1'）.addClass（'darkmode'）；
$（'.part2，.part4'）.addClass（'greymode'）；
$（'.mngNv'）.addClass（'menudrk'）；
}否则{
$（'.part1'）.removeClass（'darkmode'）；
$（'.part2，.part4'）.removeClass（'greymode'）；
$（'.mngNv'）.removeClass（'menudrk'）；
}
});
};
$.hdchng（）
部分{
宽度：100%；
高度：600px；
边框：1px纯蓝色；
边缘：1米；
}
.第1部分、第2部分、第4部分{
位置：固定；
宽度：100px；
高度：100px；
背景色：#eee；
}
.第1部分{
左：0；
}
.第二部分{
左：120px；
}
.第四部分{
左：240px；
}
.darkmode{
背景色：#333；
}
格雷莫先生{
背景色：#777；
}
由于您没有包含整个HTML，我添加了几个div和一些CSS只是为了演示。你的代码基本上是有效的。您只需要将点添加到
.part4
的选择器中


$.hdchng=函数（）{
var hubchng=$（'.drk'）；
var distance=hubchng.offset（）.top；
$window=$（window）；
$window.scroll（函数（）{
如果（$window.scrollTop（）>=距离）{
$（'.part1'）.addClass（'darkmode'）；
$（'.part2，.part4'）.addClass（'greymode'）；
$（'.mngNv'）.addClass（'menudrk'）；
}否则{
$（'.part1'）.removeClass（'darkmode'）；
$（'.part2，.part4'）.removeClass（'greymode'）；
$（'.mngNv'）.removeClass（'menudrk'）；
}
});
};
$.hdchng（）
部分{
宽度：100%；
高度：600px；
边框：1px纯蓝色；
边缘：1米；
}
.第1部分、第2部分、第4部分{
位置：固定；
宽度：100px；
高度：100px；
背景色：#eee；
}
.第1部分{
左：0；
}
.第二部分{
左：120px；
}
.第四部分{
左：240px；
}
.darkmode{
背景色：#333；
}
格雷莫先生{
背景色：#777；
}
看看这个片段。您应该能够根据您的代码对其进行调整。我需要查看您页面中的确切代码，以便提供更详细的建议


var hubtopdistance=[]；
var hubBtmDistances=[]；
var i=0；
$（'section.drk'）。每个（函数（i，el）{
轮毂顶距.推力（$（el）.offset（）.top）；
hubBtmDistances.push（$（el）.offset（）.top+$（el）.height（））；
});
var drkCount=轮毂间距.length；
变量断点={
值：0，
参考：“midScrn”，
set:function（）{
var v=钙离子浓度（）；
breakpoint.value=v[breakpoint.reference]；
}
};
$（窗口）。滚动（函数（）{
breakpoint.set（）；
$（'.distanceToTop'）.text（parseInt（breakpoint.value））；
对于（i=0；ihubtopdistance[i]）{
if（breakpoint.value

部分{
高度：100vh；
}
.distanceToTop{
位置：固定；
顶部：5px；
右：10px；
宽度：50px；
高度：1.5em；
边框：1px纯紫色；
文本对齐：右对齐；
填充：0 5px；
}
.布局{
位置：相对位置；
}
.darkmode{
背景色：海军蓝；
颜色：黄色；
}

第一节
第二节
第三节
看看这个片段。您应该能够根据您的代码对其进行调整。我需要查看您页面中的确切代码，以便提供更详细的建议


var hubtopdistance=[]；
var hubBtmDistances=[]；
var i=0；
$（'section.drk'）。每个（函数（i，el）{
轮毂顶距.推力（$（el）.offset（）.top）；
hubBtmDistances.push（$（el）.offset（）.top+$（el）.height（））；
});
var drkCount=轮毂间距.length；
变量断点={
值：0，
参考：“midScrn”，
set:function（）{
var v=钙离子浓度（）；
breakpoint.value=v[breakpoint.reference]；
}
};
$（窗口）。滚动（函数（）{
breakpoint.set（）；
$（'.distanceToTop'）.text（parseInt（breakpoint.value））；
对于（i=0；ihubtopdistance[i]）{
if（breakpoint.value

部分{
高度：100vh；
}
.distanceToTop{
位置：固定；
顶部：5px；
右：10px；
宽度：50px；
高度：1.5em；
边框：1px纯紫色；
文本对齐：右对齐；
填充：0 5px；
}
.布局{
位置：相对位置；
}
.darkmode{
背景色：海军蓝；
颜色：黄色；
}

第一节
第二节
第三节
这是因为这一行：
var distance=hubchng.offset（）.top计算一个距离。你应该计算并考虑多个距离。是t吗