Javascript 如何使用Intersection Observer API获取所有条目？

我想使左侧导航显示当前可见部分。但是我的部分有不同的高度，我不知道如何正确地跟踪它们

如果每次调用回调函数时都能看到所有条目及其状态，但它得到的条目与阈值匹配，那就更好了

我可能遗漏了什么。应该有办法让这一切正常运作

这是我的jsBin

stickybits（“#sticky”，{stickyBitStickyOffset:0}）；
if（window.IntersectionObserver）{
常量回调=函数（条目）{
//找到所有可见的，然后以最大的相交比
设currentNav=null；
const visibleEntries=entries.filter（entry=>entry.isIntersecting）；
if（Array.isArray（visibleEntries）&&visibleEntries.length>0）{
currentNav=可见条目。减少（（上一个，当前）=>{
返回（prev.intersectionRatio>current.intersectionRatio）？prev:当前；
});
}否则{
currentNav=可见条目；
}
if（当前导航目标）{
//处理导航更改
const wasCurrent=document.querySelector（'.navItem.isCurrent'）；
如果（当前）{
wasCurrent.classList.remove（'isCurrent'）；
}
const currentName=currentNav.target.getAttribute（'name'）；
恒定电流=
document.querySelector（`.navItem[data link='${currentName}']`）；
current.classList.add（'isCurrent'）；
}
};
const observer=新的IntersectionObserver（回调{
root:null，
rootMargin:'0px'，
阈值：[0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1]，
});
const section=document.queryselectoral（'section'）；
section.forEach（item=>observer.observe（item））；
}

*{
保证金：0；
填充：0；
}
.行{
宽度：100%；
显示器：flex；
柔性包装：nowrap；
}
.导航{
右边距：50px；
}
纳维滕先生{
颜色：#666；
}
.navItem.isCurrent{
字体大小：粗体；
颜色：#000；
}
.内容{
宽度：100%；
弹性：1；
}
部分{
填充：10px；
宽度：200px；
边界半径：10px；
边缘底部：30px；
}
.第1节{
高度：800px；
背景：#90ee90；
}
.第2节{
高度：200px；
背景：#添加8e6；
}
.第3节{
高度：150像素；
背景#8080；
}
.第4节{
高度：400px；
背景#800080；
}

JS-Bin

第1节
第2节
第三节
第4节

这有点棘手，但它应该按照您所描述的那样工作。javascript注释中的更多信息：

stickybits（“#sticky”，{stickyBitStickyOffset:0}）；
if（window.IntersectionObserver）{
const section=document.queryselectoral（'section'）；
const sectionArr=数组。from（节）；
常量回调=函数（条目）{
//这是所有目标的初始化
//之后，仅在同一视口位置（滚动）中通过阈值（任意）的条目
//因此，它很可能是一个或两个部分，而不是全部
用于（条目的输入）{
//在本机对象上设置属性很难看，但最简单
//我们希望intersectionRect比较高度，而不是intersectionRatio
//更多Treshold=>更精确的行为
//步骤0.1=10%，3000px高度的10%截面=300px=>相当大的断点
entry.target.\u intersectionHeight=entry.intersectionRect.height；
}
//比较每个交叉口后横断面（全部）的可见性
const mostVisibleSection=section arr.reduce（（上一个，当前）=>{
if（当前相交高度>（上一个？上一个相交高度：0））{
回流；
}否则{
返回上一个；
}
}，空）；
//提示：您可以将此变量存储在回调之外，而不是选择
const prevMostVisibleLink=document.querySelector（'.isCurrent'）；
//没有可见的部分
如果（！mostVisibleSection）{
prevMostVisibleLink&&prevMostVisibleLink.classList.remove（'isCurrent'）；
返回；
}
//好的，有最明显的部分，让目标链接
const mostVisibleLink=document.getElementById（mostVisibleSection.dataset.id）；
if（mostVisibleLink！==prevMostVisibleLink）{
prevMostVisibleLink&&prevMostVisibleLink.classList.remove（'isCurrent'）；
mostVisibleLink.classList.add（'isCurrent'）；
}
};
//“零覆盖”也会覆盖出视口的条目
const observer=新的IntersectionObserver（回调{
阈值：[0,0.05,0.1,0.15,0.2,0.25,0.3,0.35,0.4,0.45,0.5,0.55,0.6,0.65,0.7,0.75,0.8,0.85,0.9,0.95,1]，
});
section.forEach（item=>observer.observe（item））；
}

*{
保证金：0；
填充：0；
}
.行{
宽度：100%；
显示器：flex；
柔性包装：nowrap；
}
.导航{
右边距：50px；
}
纳维滕先生{
颜色：#666；
}
.navItem.isCurrent{
字体大小：粗体；
颜色：#000；
}
.内容{
宽度：100%；
弹性：1；
}
部分{
填充：10px；
宽度：200px；
边界半径：10px；
边缘底部：30px；
}
.第1节{
高度：800px；
背景：#90ee90；
}
.第2节{
高度：200px；
背景：#添加8e6；
}
.第3节{
高度：150像素；
背景#8080；
}
.第4节{
高度：400px；
背景#800080；
}

JS-Bin

第1节
第2节