Javascript 基于背景色的倒排logo

我想知道是否有人发现了一种基于页面“部分”旋转出徽标的漂亮方法

更详细地说，我在一个透明的导航栏上有一个徽标，比如说一个白色徽标

我的页面分为几个部分，一些灰色/浅色背景，一些深色/黑色背景。当我滚动时，我希望粘性徽标将被换成相反的颜色。我试图用一个id来命名每个部分，比如

id='white

和

id=black

然后，当我向下滚动并点击该按钮时，我会触发该函数并调出图片，尽管我意识到它只检测第一个id（白色）或第二个id（黑色）

不知道如何处理这个问题，然后为每个部分创建一个唯一的id，这看起来很野蛮

window.onscroll=function（）{
myFunction（）
};
函数myFunction（）{
if（$（this.scrollTop（）>=$（'#white'）.position（）.top）{
logoSwap（0）；
}else if（$（this.scrollTop（）>=$（'#black'）.position（）.top））{
标识交换（1）；
}
}
函数logoSwap（which）{
如果（哪个）{
$（'#logo'）.css（“背景色”、“黑色”）；
}否则{
$（'#logo'）.css（“背景色”、“白色”）；
}
}

#徽标{
位置：固定；
排名：0；
左：0；
高度：50px；
宽度：50px；
背景色：黑色；
}
.h500{
高度：500px；
}
怀特先生{
背景色：白色；
}
布莱克先生{
背景色：黑色；
}

---

DOM id必须是唯一的，因此您的代码只能识别每个DOM id的第一个实例。您应该找到滚动的最后一个部分，并找到具有以下内容的类：

function myFunction() {
    var position = $(this).scrollTop()

    var class_pos = $('.white, .black').filter(function(){ return position >= $(this).position().top})
  // console.log(class_pos)
  if ($(class_pos[class_pos.length - 1]).hasClass('white')){
    logoSwap(0);
  } else {
    logoSwap(1);
  }

}

---

您必须使用类而不是id，因为文档中必须只有一个项具有相同的id，而不是类

关于脚本：想法是迭代所有的部分。白色或。黑色，并获得每个部分的顶部和底部，这将允许您在处理滚动事件时验证您的徽标是否在给定的部分内（在部分的顶部和底部位置之间）

编辑：我将此代码（使用纯javascript）添加到我的注释中

constwhites=[…document.querySelectorAll（'.white'）].map（e=>({
top:e.getBoundingClientRect（）.top，
底部：e.getBoundingClientRect（）.底部
}));
//如果只有白色和黑色部分的逻辑，可以省略黑色，否则可以使用它们
//const blacks=[…document.queryselectoral（'.black'）].map（e=>（{top:e.top，bottom:e.bottom}））；
const logo=document.querySelector（“#logo”）；
document.addEventListener（'scroll'，（）=>{
让位置=（logo.getBoundingClientRect（）.bottom+logo.getBoundingClientRect（）.top）/2+window.scrollY；
for（设i=0；iif（position>=whites[i]。top&&position不确定我是否缺少某些内容，但尝试此操作时top的属性未定义。是的，我搞错了，因为它们是DOM中的同级，因此无法工作。相关：/