Javascript 基于交叉点观测器的背景DIV淡入淡出

当前，我的背景div文本会根据屏幕上的元素进行更改

有没有办法做到这一点：

• 当用户滚动时，文本淡出
• 然后淡入，当div位于屏幕中央时为100%
• 然后随着用户进一步滚动而淡出
• 当用户向上滚动时，是否会发生相反的情况

我见过基于JQuery的解决方案，但我想用香草javascript来实现这一点

const section=document.querySelectorAll（'.check'）；
const bg=document.querySelector（'.bg'）；
const observer=新的IntersectionObserver（（条目，observer）=>{
entries.forEach（entry=>{
className=entry.target.classList[1]；
log（类名）；
if（输入。isIntersecting）{
if（className=='first'）{
bg.innerHTML='FIRST'；
}else if（className==='second'）{
bg.innerHTML='SECOND'；
}else if（className=='third'）{
bg.innerHTML='THIRD'；
}else if（className=='fourth'）{
bg.innerHTML='FOURTH'；
}else if（className=='fifth'）{
bg.innerHTML='FIFTH'；
}else if（className=='sixth'）{
bg.innerHTML='SIXTH'；
}
}否则{
}
})
});
section.forEach（section=>{
观察员：观察（第节）；
});
。检查{
宽度：100px；
高度：20px；
背景色：红色；
颜色：白色；
填充：20px；
}
.垫片{
高度：100vh；
宽度：100px；
}
.bg{
位置：固定；
字体大小：100px；
颜色：#c9c9c9；
z指数：-100；
}
法丹先生{
不透明度：1；
}
.淡出{
不透明度：0；
}

背景
第一
第二
第三
第四
第五
第六
不是我最好的作品，而是那种作品


const section=document.querySelectorAll（'.check'）；
const bgText=document.querySelector（'.bg__text'）；
常量大写=（值）=>{
const[firstChar，…rest]=值；
返回firstChar.toUpperCase（）+rest.join（“”）.toLowerCase（）
}
const checkpoints=Array.from（document.queryselectoral（“.check”））
.map（元素=>({
id:element.classList[1]，
元素，
rect:element.getBoundingClientRect（）
}));
让currentElement=null；
window.addEventListener（“滚动”，（）=>{
const scrollY=window.scrollY；
const innerHeight=window.innerHeight；
常量距离=检查点.map（pr=>({
…公共关系，
距离：Math.abs（pr.rect.y-scrollY）
}));
距离.排序（（上一个，下一个）=>上一个距离>下一个距离？1:-1）；
常量距离=距离。查找（pr=>pr.element==currentElement）。距离；
不透明度=距离/内部高度；
不透明度=不透明度>0.5？1-不透明度：不透明度；
bgText.style.opacity=不透明度*2；
})
const observer=新的IntersectionObserver（（条目，observer）=>{
entries.forEach（entry=>{
常量元素=entry.target；
className=element.classList[1]；
如果（！entry.isIntersecting）{
返回；
}
当前元素=元素；
bgText.textContent=大写（类名）；
})
});
section.forEach（section=>{
观察员：观察（第节）；
});
。检查{
宽度：100px；
高度：20px；
背景色：红色；
颜色：白色；
填充：20px；
}
.垫片{
高度：100vh；
宽度：100px；
}
.bg{
位置：固定；
字体大小：100px；
颜色：#c9c9c9；
z指数：-100；
}
法丹先生{
不透明度：1；
}
.淡出{
不透明度：0；
}

第一
第二
第三
第四
第五
第六