Javascript 对具有相同类的多个元素使用getBoundingClientRect（）吗？

我正在尝试将粘性导航添加到我的网站中，当它在不同的部分上滚动时，会发生变化。滚动类为

.dark

的部分时，应将徽标和文本颜色更改为白色。。否则是黑色的

下面是我一直使用的javascript，但这似乎只适用于类为

.dark

的第一个元素，我如何调整它以针对同一类的所有元素

window.addEventListener('scroll', function () {

        var section = document.querySelector('.dark').getBoundingClientRect(),
            logo = document.querySelector('#logo-container').getBoundingClientRect();

          if (section.top <= logo.top + logo.height && section.top + section.height > logo.top) {
            document.getElementById('logo-container').classList.add('white-logo');
            document.getElementById('navholder').style.color = "#fff";

          } else {
            document.getElementById('logo-container').classList.remove('white-logo');
            document.getElementById('navholder').style.color = "#111";
          }

     });

window.addEventListener（'scroll'，函数（）{
var section=document.querySelector（'.dark'）.getBoundingClientRect（），
logo=document.querySelector（“#logo容器”）.getBoundingClientRect（）；
如果（节.顶部徽标.顶部）{
document.getElementById（'logo-container'）.classList.add（'white-logo'）；
document.getElementById（'navholder'）.style.color=“#fff”；
}否则{
document.getElementById（'logo-container'）.classList.remove（'white-logo'）；
document.getElementById（'navholder'）.style.color=“#111”；
}
});

---

如果这是一个显而易见的问题，我很抱歉，我对javascript不是很了解！我曾试图寻找解决这个问题的办法，但没有多大成功。。任何帮助都将不胜感激

如果你把它分解成几个函数，它会让生活更轻松。您可以检查徽标是否为任何部分，然后相应地设置其类别：

const setLogoBlackStatus=status=>{
如果（状态）{
document.getElementById（'logo-container'）.classList.add（'black-logo'）；
document.getElementById（'logo-container'）.classList.remove（'white-logo'）；
}否则{
document.getElementById（'logo-container'）.classList.add（'white-logo'）；
document.getElementById（'logo-container'）.classList.remove（'black-logo'）；
}
}
const logoIsInSection=logo=>sectionRect=>sectionRect.top logo.top
addEventListener（'scroll'，function（）{
var sectionRects=[…document.querySelectorAll（'.dark'）]
.map（el=>el.getBoundingClientRect（））；
var logo=document.querySelector（“#logo container”）.getBoundingClientRect（）；
var logoinysections=sectionRects
.some（logo部分（logo））
setLogoBlackStatus（！logoinysections）；
});
img{
宽度：50px；
位置：固定；
top:20vw；
左：20vw；
z指数：1；
}
.白色标志{
过滤器：倒置（90%）；
}
.科{
宽度：100%；
高度：300px；
}
.黑暗{
背景色：rgba（20,20,30）；
}
怀特先生{
背景色：白色；
}

非常感谢，这非常有效！！我不认为我能做到这一点，所以谢谢你：）@David我相信你能及时做到，但节省时间并征求我的意见是很好的
querySelector
只返回最多一个元素作为开头；如果您想获得所有这些，您需要使用
querySelectorAll
。但是，当然，您仍然需要对它们进行循环，并分别对每个元素执行检查——“同时对多个元素调用”getBoundingClientRect是不可能的。